2.7 CSS动画
1. 转换
transform:
<1>2D转换
translate()
rotate()
scale()
skew() 倾斜
matrix()
<2>3D转换
rotateX()
rotateY()
2. 过渡
transition:
transition-property 过渡名称
transition-duration 过渡时间
transition-timing-function 过渡时间去西安
transition-delay 过渡开始时间
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <div>效果展示</div> </body> </html>
div{ width: 100px; height: 100px; background-color: blue; text-align: center; transition: width 2s, height 2s, transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; } div:hover{ width: 200px; height: 200px; transform: rotate(360deg); -webkit-transform: rotate(360deg); }
鼠标放在蓝色方块上, 会在2s内完成放大为200px*200px且旋转360度的动作
3. 动画
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <div>效果展示</div> </body> </html>
div{ width: 100px; height: 100px; background-color: red; position: relative; animation: anim 5s; -webkit-animation: anim 5s; } @keyframes anim{ 0%{background-color: red; left: 0px; top:0px} 25%{background-color: blue; left: 200px; top:0px} 50%{background-color: chocolate; left: 200px; top:200px} 75%{background-color: brown; left: 0px; top:200px} 100%{background-color: red; left: 0px; top:0px} } //浏览器的适配 @-webkit-keyframes anim { 0%{background-color: red; left: 0px; top:0px} 25%{background-color: blue; left: 200px; top:0px} 50%{background-color: chocolate; left: 200px; top:200px} 75%{background-color: brown; left: 0px; top:200px} 100%{background-color: red; left: 0px; top:0px} }
div在5s内向右, 向下, 向左, 向上回到原地, 并且颜色此过程中也在改变
4. 多列
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <div> 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 欢迎光临武汉这里山好水好人更好周黑鸭很好吃精武鸭脖也不错 </div> </body> </html>
div{ column-count: 4; column-gap: 50px; column-rule: 5px outset red; -webkit-column-count: 4; -webkit-column-gap: 50px; -webkit-column-rule: 5px outset red; }
5. 瀑布流效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <div class="container"> <div><img src="img/1.jpg"></div> <div><img src="img/3.jpg"></div> <div><img src="img/4.jpg"></div> <div><img src="img/5.jpg"></div> <div><img src="img/7.jpg"></div> <div><img src="img/8.jpg"></div> <div><img src="img/9.jpg"></div> <div><img src="img/1.jpg"></div> <div><img src="img/3.jpg"></div> <div><img src="img/4.jpg"></div> <div><img src="img/2.jpg"></div> <div><img src="img/3.jpg"></div> <div><img src="img/4.jpg"></div> <div><img src="img/6.jpg"></div> <div><img src="img/8.jpg"></div> <div><img src="img/2.jpg"></div> <div><img src="img/3.jpg"></div> <div><img src="img/4.jpg"></div> <div><img src="img/5.jpg"></div> <div><img src="img/7.jpg"></div> <div><img src="img/1.jpg"></div> <div><img src="img/2.jpg"></div> <div><img src="img/3.jpg"></div> <div><img src="img/6.jpg"></div> <div><img src="img/7.jpg"></div> <div><img src="img/9.jpg"></div> </div> </body> </html>
.container{ column-width: 250px; column-gap: 5px; -webkit-column-width: 250px; -webkit-column-gap: 5px; } .container div{ width: 250px; margin: 5px 0px; }
