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

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

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

第四步：Hover和Focus时放缩正方形

想在hover和focus的时候达到缩放的效果，我们需要添加如下代码：



    
	
  1. 
		ul li a:hover,ul li a:focus{  
    2. 
	
  2. 
		-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7)  ;  
    3. 
	
  3. 
		-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7)  ;  
    4. 
	
  4. 
		box-shadow:10px 10px 7px rgba(0,0,0,.7)  ;  
    5. 
	
  5. 
		-webkit-transform: scale(1.25);  
    6. 
	
  6. 
		-moz-transform: scale(1.25);  
    7. 
	
  7. 
		-o-transform: scale(1.25);  
    8. 
	
  8. 
		position:relative;  
    9. 
	
  9. 
		z-index:5;  
    10. 
	
  10. 
		}  
    11. 




	设置z-index为5是为了让正方形在放大的时候盖住其它的正方形，同时因为也设置了focus，所以也支持Tab键切换访问，

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



	效果如下：



	



	平滑过渡和添加颜色


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机