zoukankan      html  css  js  c++  java
  • 博客园自定义设计(三)用css3自定义标签样式

    直接贴代码:

    .catListTag li {
    		text-decoration:none;
    		color:#000;
    		background:#ffc;
    		display:block;
    		height:2em;
    		margin:1em;
    		10em;
    		overflow:hidden;
    		-moz-box-shadow:5px 5px 7px rgb(33,33,33,1);
    		-webkit-box-shadow:5px 5px 7px rgb(33,33,1);
    		box-shadow:5px 5px 7px rgb(33,33,1);
    		-moz-transition: -moz-transform 0.25s liner;
    		-o-transition:-o-transform 0.25s linear;
    		-webkit-transition:-webkit-transform 0.25s linear;
    	}
    	
    
    	.catListTag li:nth-of-type(even){
    		-webkit-transform:rotate(14deg);
    		-o-transform:rotate(14deg);
    		-moz-transform:rotate(14deg);
    		position:relative;
    		top:5px;
    	}
    	.catListTag li:nth-of-type(3n){
    		-webkit-transform:rotate(-3deg);
    		-o-transform:rotate(-3deg);
    		-moz-transform:rotate(-3deg);
    		position:relative;
    		top:-5px;
    
    	}
    	.catListTag li:nth-of-type(5n){
    		-webkit-transform:rotate(5deg);
    		-o-transform:rotate(5deg);
    		-moz-transform:rotate(5deg);
    		position:relative;
    		top:-10px;
    	}
    	.catListTag li:hover,ul li:focus{
    		-moz-box-shadow:10px 10px 7px rgb(0,0,0,7);
    		-webkit-box-shadow:5px 5px 7px rgb(0,0,0,7);
    		box-shadow:5px 5px 7px rgb(0,0,0,7);
    		-webkit-transform:scale(1.1);
    		-o-transform:scale(1.1);
    		-moz-transform:scale(1.1);
    		z-index:3;
    	}
            #sidebar_toptags li{text-indent:2em}   
    

      

     添加完毕后效果如下:

    如果觉得角度太大,可以自己做下微调。

  • 相关阅读:
    2014-11-24 作业
    数据库查询基本部分
    SQL备份还原,分离附加
    SQL基础2
    SQL基础,与数据类型;
    if语句解一元二次方程~
    用C语言计算圆的面积~!!!!!!!
    C语言基础
    数据导出和TreeView
    MDI窗体容器和权限设置
  • 原文地址:https://www.cnblogs.com/luochengqiuse/p/4616348.html
Copyright © 2011-2022 走看看