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;

　　}

转载于:https://www.cnblogs.com/nana135/p/6358170.html

原文地址：https://blog.csdn.net/weixin_34192816/article/details/94530236?ops_request_misc=&request_id=6c19665b5171484fa1ff5cf64d700d68&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-2-94530236-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88