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}   
    

      

     添加完毕后效果如下:

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

  • 相关阅读:
    LeetCode Power of Three
    LeetCode Nim Game
    LeetCode,ugly number
    LeetCode Binary Tree Paths
    LeetCode Word Pattern
    LeetCode Bulls and Cows
    LeeCode Odd Even Linked List
    LeetCode twoSum
    549. Binary Tree Longest Consecutive Sequence II
    113. Path Sum II
  • 原文地址:https://www.cnblogs.com/luochengqiuse/p/4616348.html
Copyright © 2011-2022 走看看