css 的过渡（transition） 和动画（animation）
1.transition
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box1{ 8 position: absolute; 9 width: 200px; 10 height: 200px; 11 /* background-color: rgba(200,180,170,.5); */ 12 background-color: #bfa; 13 14 /*opacity 用来设置元素的透明度 15 需要一个0-1之间的值 16 1 表示完全不透明 17 0 表示完全透明 18 19 rgba() 只是设置一个透明的样式 20 */ 21 opacity: .5; 22 23 /* left: 0; */ 24 25 /* 26 过渡的设置方式 27 transition-property 表示对哪些属性应用过渡 28 - 可以设置一个属性 29 - 也可以设置多个属性，多个属性之间使用,隔开 30 - 也可以使用all，表示所有属性 31 - 注意：所有的有具体数值的属性都可以应用过渡效果 32 33 34 transition-duration 过渡的时间 35 - 时间单位 s（秒） ms（毫秒） 36 - 1s = 1000ms 37 */ 38 transition-property: all; 39 transition-duration: 1000ms; 40 } 41 42 /* 43 过渡指当一个元素的属性发生变化，浏览器可以一点一点的将该值变化到目标值 44 过渡一般会用于一些交互效果，用来提升用户体验 45 */ 46 47 .box1:hover{ 48 width: 400px; 49 height: 400px; 50 left: 100px; 51 background-color: orange; 52 } 53 54 </style> 55 </head> 56 <body> 57 58 <div class="box1"> 59 Hello 60 61 <!-- <img src="../day07/img/an.jpg" alt=""> --> 62 </div> 63 64 </body> 65 </html>
2.transition
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 .outer{ 9 width: 1100px; 10 height: 500px; 11 border-right: 1px blue solid; 12 } 13 14 .box1{ 15 width: 100px; 16 height: 100px; 17 background-color: tomato; 18 19 /* transition-property: all; 20 transition-duration: 10s; */ 21 22 /* 23 transition-delay 过渡效果执行的延时 24 */ 25 /* transition-delay: 2s; */ 26 27 28 /* 29 transition-timing-function 用来指定过渡的时间函数 30 - 指定的就是过渡效果的运行方式 31 可选值： 32 ease 默认值，先加速 后减速 33 linear 匀速运动 34 ease-in 加速运动 35 ease-out 减速运动 36 ease-in-out 先加速，后减速 37 38 - 也可以通过贝塞尔曲线来自定义时间函数 39 cubic-bezier(p1, p2, p3, p4) 40 41 - steps()可以用来设置一个分步的过渡效果 42 steps(步数,end/start) 43 end 默认值，计时结束，才执行 44 start 计时刚开始就执行 45 46 https://cubic-bezier.com/ 生成贝塞尔曲线的网站 47 48 */ 49 /* transition-timing-function: cubic-bezier(.3,1.37,1,-0.71); */ 50 /* transition-timing-function: cubic-bezier(.03,-0.44,.93,-0.93); */ 51 /* transition-timing-function: steps(2,start); */ 52 53 54 /* transition 简写属性，可以同时设置所有的过渡相关的样式 55 简写属性除了duration 和 delay两个属性外其他值没有顺序要求 56 */ 57 transition: steps(2) all 2s ; 58 59 60 } 61 62 .outer:hover .box1{ 63 margin-left: 1000px; 64 } 65 66 .box2{ 67 width: 100px; 68 height: 100px; 69 background-color: greenyellow; 70 margin-top: 100px; 71 72 transition-property: margin-left; 73 transition-duration: 2s; 74 } 75 76 .outer:hover .box2{ 77 margin-left: 1000px; 78 } 79 </style> 80 </head> 81 <body> 82 <div class="outer"> 83 <div class="box1"></div> 84 <!-- <div class="box2"></div> --> 85 86 </div> 87 88 </body> 89 </html>
3.animation
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>动画</title> 6 <style> 7 .box1{ 8 height: 100px; 9 width: 100px; 10 position: absolute; 11 background-color: #bfa; 12 13 /* 将关键帧，应用到当前元素上 14 animation-name 表示当前要应用的动画的名字 15 animation-duration 用来指定动画执行的时间 16 animation-iteration-count 动画执行的次数 17 可选值： 18 数值 19 infinite 无限执行 20 21 animation-delay 动画开始执行的延时 22 animation-timing-function 指定动画的时间函数 23 用法和transition是一致的 24 25 animation-play-state 动画的运行状态 26 可选值： 27 running 动画运行 28 paused 动画暂停 29 30 animation-direction 动画执行的方向 31 可选值： 32 normal 默认值 动画从 from 到 to 运行 33 reverse 动画反向运行（从 to 到 from） 34 alternate 开始时从前向后走（from 到 to） 35 回来时会从后向前走（to 到 from） 36 alternate-reverse 开始时从后完全走（to 到 from） 37 回来时，从前往后走（from 到 to） 38 39 animation-fill-mode 动画的填充方式 40 可选值： 41 none 默认值，动画执行完毕后，元素会回到原来的位置 42 forwards 动画执行完毕后，元素会停在结束位置 43 backwards 动画执行延时时，元素会处在from的状态 44 both 动画执行延时时，元素会处在from的状态 动画执行完毕后，元素会停在结束位置 45 */ 46 /* animation-name: test; 47 animation-duration: 4s; 48 animation-delay: 2s; */ 49 50 /* animation-direction:alternate-reverse; */ 51 52 /* animation-fill-mode: both; */ 53 54 /* animation-timing-function: ease-in-out;*/ 55 56 /* animation-iteration-count: infinite; */ 57 58 59 /* 60 transition，只能用于设置一次性的过渡效果， 61 如果需要持续运行的动画，必须要用到animation 62 63 要使用动画，必须先设置关键帧 64 */ 65 66 67 /* 68 animation的简写属性 69 可以通过它来设置所有的动画相关的样式 70 同样只有 duration 和 delay 有顺序要求 71 */ 72 animation: test 2s ease-in infinite both alternate; 73 74 75 } 76 77 .box2{ 78 height: 100px; 79 width: 100px; 80 top:200px; 81 position: absolute; 82 background-color: #bfa; 83 84 animation-name: test; 85 animation-duration: 4s; 86 animation-delay: 2s; 87 88 89 animation-fill-mode: none; 90 91 92 93 } 94 95 .box1:hover{ 96 animation-play-state: paused; 97 } 98 99 /* 创建一个关键帧 */ 100 @keyframes test{ 101 /* from指定动画起始位置的样式 */ 102 from{ 103 left: 0px; 104 background-color: tomato; 105 } 106 107 /* to指定动画结束位置的样式 */ 108 to{ 109 left: 800px; 110 background-color: yellow; 111 } 112 } 113 114 </style> 115 </head> 116 <body> 117 <div class="box1"></div> 118 119 120 <div class="box2"></div> 121 122 </body> 123 </html>
