关于CSS3 Transitions的小例子

这是个很简单关于css3Transitions的小例子。

下面按照效果我们来一个一个解说css代码。

1 网页的背景，网页的背景由两部分组成，image1 和斜线，这里面有个效果，背景图片用了两张图片，在css2.0的时候背景图片只能是一张，第二背景的自适应，网页大小。

对应代码如下

1. body{
   
2. 
   
3. background-color: transparent;
   
4. 
   
5. background-repeat: repeat, no-repeat;
   
6. 
   
7. background-position: center center;
   
8. 
   
9. background-attachment: fixed;
   
10. 
    
11. -webkit-background-size: auto, cover;
    
12. 
    
13. -moz-background-size: auto, cover;
    
14. 
    
15. -o-background-size: auto, cover;
    
16. 
    
17. background-size: auto, cover;
    
18. 
    
19. 
    
20. 
    
21. }

复制代码
2 鼠标在菜单停留时候，动画效果

分布来：

当鼠标不放到菜单上面的效果，css实现 ——注：这里是把文字的颜色设置透明，然后设置文字的阴影，用文字的阴影来表现模糊效果

对应代码如下

1. .bmenu li a{
   
2. 
   
3. color: transparent;
   
4. 
   
5. display: block;
   
6. 
   
7. text-transform: uppercase;
   
8. 
   
9. text-shadow: 0px 0px 5px #fff;
   
10. 
    
11. letter-spacing: 1px;
    
12. 
    
13. -webkit-transition: all 0.3s ease-in-out;
    
14. 
    
15. -moz-transition: all 0.3s ease-in-out;
    
16. 
    
17. -o-transition: all 0.3s ease-in-out;
    
18. 
    
19. -ms-transition: all 0.3s ease-in-out;
    
20. 
    
21. transition: all 0.3s ease-in-out;
    
22. 
    
23. }

复制代码
当鼠标悬停时候发生的变化结果

对应如下

1. .bmenu:hover li a{
   
2. 
   
3. text-shadow: 0px 0px 5px #0d1a3a;
   
4. 
   
5. }
   
6. 
   
7. 
   
8. 
   
9. .bmenu li a:hover{
   
10. 
    
11. color: #fff;
    
12. 
    
13. text-shadow: 0px 0px 1px #fff;
    
14. 
    
15. padding-left: 10px;
    
16. 
    
17. }

复制代码
这俩个属性一定要把位置 放正确，

.bmenu:hover li a 先让所有的a变成灰色的阴影，然后在这些a中.bmenu li a:hover鼠标悬停的是白色，这样可以达到选中的效果。

在整个过程中Transitions属性扮演的角色是让，页面元素css属性中的变化，是延时完成的，这样达到了一个动画的效果

Transitions在IE中是不支持的，在IE中的效果是瞬间变成另一个css属性。