关于CSS3 Transitions的小例子

这是个很简单关于css3Transitions的小例子。 下面按照效果我们来一个一个解说css代码。 1 网页的背景,网页的背景由两部分...
这是个很简单关于css3Transitions的小例子。

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

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

对应代码如下
  1. body{

  2. background-color: transparent;

  3. background-repeat: repeat, no-repeat;

  4. background-position: center center;

  5. background-attachment: fixed;

  6. -webkit-background-size: auto, cover;

  7. -moz-background-size: auto, cover;

  8. -o-background-size: auto, cover;

  9. background-size: auto, cover;



  10. }
复制代码
2 鼠标在菜单停留时候,动画效果

分布来:

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

对应代码如下
  1. .bmenu li a{

  2. color: transparent;

  3. display: block;

  4. text-transform: uppercase;

  5. text-shadow: 0px 0px 5px #fff;

  6. letter-spacing: 1px;

  7. -webkit-transition: all 0.3s ease-in-out;

  8. -moz-transition: all 0.3s ease-in-out;

  9. -o-transition: all 0.3s ease-in-out;

  10. -ms-transition: all 0.3s ease-in-out;

  11. transition: all 0.3s ease-in-out;

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

对应如下
  1. .bmenu:hover li a{

  2. text-shadow: 0px 0px 5px #0d1a3a;

  3. }



  4. .bmenu li a:hover{

  5. color: #fff;

  6. text-shadow: 0px 0px 1px #fff;

  7. padding-left: 10px;

  8. }
复制代码
这俩个属性一定要把位置 放正确,

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

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

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

标签: css3动画css