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-250px;

　　　　-webkit-column-250px;

　　　　-webkit-column-gap:5px;

　　　　column-gap:5px;

　　}