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;
}
