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}   
    

      

     添加完毕后效果如下:

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

  • 相关阅读:
    Java日期时间API系列1-----Jdk7及以前的日期时间类
    Redis设置密码,保护数据安全
    Java SE 8 并发增强
    Java8并发教程:Threads和Executors
    MySQL5.7增量备份恢复全实战
    HashSet HashMap 源码阅读笔记
    操作系统知识点
    Window批处理命令
    JS典型题
    SiteMesh装饰模式
  • 原文地址:https://www.cnblogs.com/luochengqiuse/p/4616348.html
Copyright © 2011-2022 走看看