CSS动画-页面特效

2D、3D转换

  通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长和拉伸

  2D转换方法

    translate() 移动

      transform:translate(100px,100px)

      -webkit-transform:translate(100px,100px) //safari chrome

      -ms-transform:translate(100px,100px) //IE

      -o-transform:translate(200px,100px)  //opera

      -moz-transform:translate(200px,100px) //firefox

    rotate() 旋转

      transform:rotate(200deg)

      -webkit-transform:rotate(200deg) //safari chrome

      -ms-transform:rotate(200deg) //IE

      -o-transform:rotate(200deg)  //opera

      -moz-transform:rotate(200deg) //firefox

    scale() 缩放

      transform:scale(1,2)

      -webkit-transform:scale(1,2) //safari chrome

      -ms-transform:scale(1,2) //IE

      -o-transform:scale(1,2)  //opera

      -moz-transform:scale(1,2) //firefox

    skew() 倾斜

      transform:skew(50deg,50deg) //Z轴倾斜50度,Y轴倾斜50度

      -webkit-transform:skew(50deg,50deg) //safari chrome

      -ms-transform:skew(50deg,50deg) //IE

      -o-transform:skew(50deg,50deg)  //opera

      -moz-transform:skew(50deg,50deg) //firefox  

    matrix()

  3D转换方法

    rotateX()

      transform:rotateX(120deg) 

      -webkit-transform:rotateX(120deg) //safari chrome

      -ms-transform:rotateX(120deg) //IE

      -o-transform:rotateX(120deg)  //opera

      -moz-transform:rotateX(120deg) //firefox  

    rotateY()

 

过渡

  元素从一种样式转换成另一种样式

    动画效果的CSS

    动画执行的时间

  属性

    transition 设置四个过渡属性

      transition:width 2s,height 2s,transform 2s;

      -webkit-transition:width 2s,height 2s,-webkit-transform 2s; //safari chrome

      -ms-transition:width 2s,height 2s,-ms-transform 2s //IE

      -o-transition:width 2s,height 2s,-o-transform 2s  //opera

      -moz-transition:width 2s,height 2s,-moz-transform 2s //firefox  

    transition-property 过渡的名称

    transition-duration 过渡效果花费的时间

    transition-timing-function 过渡效果的时间曲线

    transition-delay 过渡效果开始时间-延时开始的时间

 

动画

  通过CSS3,也可以创建动画

  动画需要遵循@keyframes规则

    规定动画的时长

    规定动画的名称

      div{

        animation:anim 5s infinite alternate;

        -webkit-animation:anim 5s;

      }

      @keyframes anim{

        0%{background:red;left:0px;top:0px}

        25%{background:blue;left:200px;top:0px}

        50%{background:#ccffcc;left:200px;top:200px}

        75%{background:#00fffff;left:0px;top:200px}

        100%{background:red;left:0px;top:0px}

      }

      @-web-keyframes anim{

        0%{background:red;left:0px;top:0px}

        25%{background:blue;left:200px;top:0px}

        50%{background:#ccffcc;left:200px;top:200px}

        75%{background:#00fffff;left:0px;top:200px}

        100%{background:red;left:0px;top:0px}

      }

 

多列

  在CSS3中,可以创建多列来对文本或者区域进行布局

  属性

    column-count

    column-gap

    column-rule

      div{

        column-count:3;

        -webkit-column-count:3;

        -webkit-column-gap:50px;

        -moz-column-gap:50px;

        column-gap:50px;

        column-rule:5px outset #FF0000;

        -webkit-column-rule:5px outset #FF0000;

      }

 

瀑布流

  .container{

    column-width:250px;

    -webkit-column-width:250px;

    -webkit-column-gap:5px;

    column-gap:5px;

  }

posted @ 2017-01-30 16:54  Arya.cc  阅读(462)  评论(0编辑  收藏  举报