Home思洋影视事业部网站建设知识库
0 Comments

HTML 5和CSS3快速制作便签特效(3)

发布于：2013-11-07  |   作者：广州网站建设  |   已聚集：人围观

第三步：倾斜正方形

为了让正方形倾斜，我们需要在li->a里添加如下代码：



    
	
  1. 
		ul li a{  
    2. 
	
  2. 
		-webkit-transform:rotate(-6deg);  
    3. 
	
  3. 
		-o-transform:rotate(-6deg);  
    4. 
	
  4. 
		-moz-transform:rotate(-6deg);  
    5. 
	
  5. 
		}  
    6. 




	但是为了能让正方形随机倾斜，而不是全部都倾斜，我们需要使用新的CSS3选择器，让正方形在每2个倾斜4个deg，每3个倾斜负3个deg,每5个倾斜5个deg：

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		ul li:nth-child(even) a{  
    2. 
	
  2. 
		-o-transform:rotate(4deg);  
    3. 
	
  3. 
		-webkit-transform:rotate(4deg);  
    4. 
	
  4. 
		-moz-transform:rotate(4deg);  
    5. 
	
  5. 
		position:relative;  
    6. 
	
  6. 
		top:5px;  
    7. 
	
  7. 
		}  
    8. 
	
  8. 
		ul li:nth-child(3n) a{  
    9. 
	
  9. 
		-o-transform:rotate(-3deg);  
    10. 
	
  10. 
		-webkit-transform:rotate(-3deg);  
    11. 
	
  11. 
		-moz-transform:rotate(-3deg);  
    12. 
	
  12. 
		position:relative;  
    13. 
	
  13. 
		top:-5px;  
    14. 
	
  14. 
		}  
    15. 
	
  15. 
		ul li:nth-child(5n) a{  
    16. 
	
  16. 
		-o-transform:rotate(5deg);  
    17. 
	
  17. 
		-webkit-transform:rotate(5deg);  
    18. 
	
  18. 
		-moz-transform:rotate(5deg);  
    19. 
	
  19. 
		position:relative;  
    20. 
	
  20. 
		top:-10px;  
    21. 
	
  21. 
		}  
    22. 




	效果如下：



	


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机