直接贴代码:
.catListTag li {
text-decoration:none;
color:#000;
background:#ffc;
display:block;
height:2em;
margin:1em;
width: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}
添加完毕后效果如下:
如果觉得角度太大,可以自己做下微调。