上善若水  

1.transition,其作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。

 transition 属性介绍:

transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如:

.trans {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

注意浏览器的兼容性。

2.transform ,指变换,使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西,拉伸,压缩,旋转,偏移。

 transform 属性介绍:

 

  • 旋转rotate

  • 扭曲skew

  • 缩放scale

  • 移动translate

  • 矩阵变形matrix

  以rotate为例,3D Transform 中 rotate 有三种方法,rotateX(angle) X轴旋转,rotateY(angle) Y轴旋转,rotateZ(angle) Z轴旋转

 

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

例如:

  

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

注意浏览器的兼容性。

3.animation 

 使用:

  

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);         
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}
.anim_image {
    padding:3px;
    border:1px solid #beceeb;
    background-color:white;
    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

注意浏览器的兼容性

此案例演示效果:http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-7.html

4.transition 与 transform 综合使用案例(两图片轮流播放):

 

img{
      width: 100px;
      height:100px;
      transition: all 1s ease-in-out ;
      cursor: pointer;
    }

    .img_top{
      position: absolute;
      transform: scale(0,0);
      opacity: 0;
    }

    .anim_box:hover .img_top{
      opacity:1;
      transform: scale(1, 1);
    }

    .anim_box:hover .img_bottom{
      transform: scale(0,0);
    }

html:

<div class="anim_box">
    <img class="img_top" src="static/image/palm.jpg">
    <img class="img_bottom" src="static/image/trees.jpg">
  </div>

案例效果:http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-11.html

 

 

  

 

posted on 2016-11-28 15:05  sherryChang  阅读(177)  评论(0编辑  收藏  举报