直接贴代码:
.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}
添加完毕后效果如下:
如果觉得角度太大,可以自己做下微调。
时间: 2024-08-01 23:19:54