[CSS3] 学习笔记-CSS动画特效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[CSS3] 学习笔记-CSS动画特效相关的知识，希望对你有一定的参考价值。
在CSS3中，出现了很多出彩的效果，例如2D、3D以及过度、动画和多列等。这些效果为页面设计添加了很多的可选设计。
1、2D、3D转换
转换，是使元素改变尺寸、形状、位置的一种效果；通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉伸或拉长；可以通过2D、3D元素来转换；
2D转换方法：
translate()、rotate()、scale()、skew()、matrix()
3D转换方法：
rotateX()
rotateY()
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="1.css"> 7 </head> 8 <body> 9 <div>这是一个初始效果</div> 10 <br/> 11 <div class="div2">这是一个改变后的效果</div> 12 <div class="div3">这是一个改变后的效果</div> 13 <div class="div4">这是一个改变后的效果</div> 14 <div class="div5">这是一个改变后的效果</div> 15 <div class="div6">这是一个改变后的效果</div> 16 17 <div class="div7">这是一个改变后的效果</div> 18 </body> 19 </html>
对应的CSS文件：
1 div{ 2 width:200px; 3 height: 200px; 4 color: blue; 5 } 6 .div2{ 7 /*这条语句不支持特定浏览器，因此运行可能无效；后面的语句是针对特定浏览器的*/ 8 transform: translate(200px, 100px); 9 10 /*这是让safari和chrome支持的语句*/ 11 -webkit-transform:translate(100px,100px); 12 13 /*这是让Ie支持的语句*/ 14 -ms-transform：translate(100px,100px); 15 16 /*这是让Opera支持的语句*/ 17 -o-transform: translate(100px,100px); 18 19 /*这是让firefox支持的语句*/ 20 -moz-transform: translate(100px,100px); 21 } 22 .div3{ 23 transform: rotate(100deg); 24 } 25 .div4{ 26 margin-top: 200px; 27 transform: scale(1,2); 28 } 29 .div5{ 30 transform: skew(20deg,20deg); 31 } 32 .div6{ 33 transform: matrix(1, 0, 0, 1, 30, 30); 34 } 35 .div7{ 36 font-size: 50px; 37 transform: rotateX(120deg) rotateY(120deg); 38 }
2、动画过渡
CSS3过渡是元素从一种样式转换成另一种样式，包括动画执行效果的CSS，动画执行的时间
属性：
transition：设置以下4个过渡属性
也可以分别设置这四个属性：
transition-property:过渡的名称
transition-duration：过渡花费的时间
transition-timing-function:过渡效果的时间曲线
transition-delay：过渡效果开始时间
1 <body> 2 <div>效果展示</div> 3 </body>
对应的CSS文件：
1 div{ 2 width:100px; 3 height: 100px; 4 background-color: blue; 5 transition: width 2s, height 2s,transform 2s; 6 transition-delay:2s; 7 } 8 div:hover{ 9 width: 200px; 10 height: 200px; 11 transform: rotate(360deg); 12 }
3、动画
通过CSS3，可以进行动画创作，CSS3的动画需要遵循@keynames规则，另外需要规定动画的时长和名称
1 <body> 2 <div>动画效果</div> 3 </body>
对应的CSS文件：
1 div{ 2 width: 200px; 3 height: 200px; 4 background-color: red; 5 position: relative; 6 /*animation:anim 5s;*/ 7 8 /*重复反方向执行动画效果*/ 9 animation: anim 5s infinite alternate; 10 } 11 /*若需浏览器适配，则：*/ 12 /*“@keyframe”改为“@-webkit-keyframes” */ 13 @keyframes anim{ 14 0%{background: red;left:0;top:0} 15 25%{background: blue;left: 200px;top:0} 16 50%{background: gold;left: 200px;top:200px} 17 75%{background: green;left:0;top:200px} 18 100%{background: red;left:0;top:0} 19 }
4、多列
CSS3中，可以创建多列来对文本或区域进行布局
属性：
column-count:分列的数量
column-gap:每列中间间隔的距离
column-rule:每列之间间隔的线，包括线的颜色
1 <body> 2 <div class="div1"> 3 大家好，欢迎进入CSS的世界 4 大家好，欢迎进入CSS的世界 5 大家好，欢迎进入CSS的世界 6 大家好，欢迎进入CSS的世界 7 大家好，欢迎进入CSS的世界 8 大家好，欢迎进入CSS的世界 9 大家好，欢迎进入CSS的世界 10 大家好，欢迎进入CSS的世界 11 大家好，欢迎进入CSS的世界 12 大家好，欢迎进入CSS的世界 13 大家好，欢迎进入CSS的世界 14 大家好，欢迎进入CSS的世界 15 大家好，欢迎进入CSS的世界 16 大家好，欢迎进入CSS的世界 17 大家好，欢迎进入CSS的世界 18 </div> 19 </body>
对应的CSS文件：
1 .div1{ 2 -webkit-column-count: 3; 3 -webkit-column-gap: 50px; 4 -webkit-column-rule: 5px outset red; 5 }
5、CSS瀑布流效果
1 <body> 2 <div class="container"> 3 <div><img src="1.jpg" width="200px" height="auto"><p>这里添加标签</p></div> 4 <div><img src="2.jpg" width="auto" height="150px"></div> 5 <div><img src="3.jpg" width="200px" height="auto"></div> 6 <div><img src="4.jpg" width="300px" height="auto"></div> 7 <div><img src="5.jpg" width="auto" height="150px"></div> 8 <div><img src="6.jpg" width="200px" height="auto"><p>这里添加标签</p></div> 9 <div><img src="7.jpg" width="auto" height="150px"></div> 10 <div><img src="8.jpg" width="200px" height="auto"></div> 11 <div><img src="9.jpg" width="auto" height="150px"><p>这里添加标签</p></div> 12 </div> 13 </body>
对应的CSS文件 ：
1 .container{ 2 -webkit-column-width: 250px; 3 -webkit-column-gap:5px; 4 } 5 .container div{ 6 width: 250px; 7 margin: 5px 0; 8 } 9 .container p{ 10 text-align: center; 11 }
以上是关于[CSS3] 学习笔记-CSS动画特效的主要内容，如果未能解决你的问题，请参考以下文章