码迷,mamicode.com
首页 > Web开发 > 详细

博客园自定义设计(三)用css3自定义标签样式

时间:2015-07-02 17:04:13      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

直接贴代码:

.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}   

  

 添加完毕后效果如下:

技术分享

 

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

博客园自定义设计(三)用css3自定义标签样式

标签:

原文地址:http://www.cnblogs.com/luochengqiuse/p/4616348.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!