标签：body package enter inf 时长 function 语法 translate strip
1 @keyframes 动画名字 { 2 from { 3 //动画开始之前的状态 4 } 5 to { 6 //动画结局的状态 7 } 8 }
1 @keyframes 动画名字 { 2 0% { 3 //开始状态 4 } 5 50%{ 6 //中间状态 7 } 8 100% { 9 //结束状态 10 } 11 }
语法： animation: 动画名称 动画时长 其他属性值;
谁用动画就给谁加调用。
动画名称及动画时长必须有，其他属性值随意且顺序也随意。
将上表做一个分析解释：
1 <!-- 3D自动轮播图，鼠标放上的时候暂停轮播 --> 2 3 <style> 4 body { 5 /* 设置透视 */ 6 perspective: 600px; 7 } 8 /* 用父盒子包裹3D立方体 */ 9 .box { 10 width: 700px; 11 height: 300px; 12 margin: 100px auto; 13 position: relative; 14 transform-origin: center; 15 transform-style: preserve-3d; 16 /* 动画名为dh，总时长5s，无限次匀速播放 */ 17 animation: dh 5s infinite linear; 18 } 19 .box img { 20 width: 700px; 21 } 22 .lb { 23 position: absolute; 24 } 25 .lb:nth-child(1) { 26 /* 沿Z方向的位移设置成轮播图图片width的一半 */ 27 transform: rotateY(90deg) translateZ(350px); 28 } 29 .lb:nth-child(2) { 30 transform: rotateY(-90deg) translateZ(350px); 31 } 32 .lb:nth-child(3) { 33 transform: rotateY(0deg) translateZ(350px); 34 } 35 .lb:nth-child(4) { 36 transform: rotateY(180deg) translateZ(350px); 37 } 38 @keyframes dh { 39 from { 40 transform: translateZ(-400px) rotateY(0deg); 41 } 42 to { 43 transform: translateZ(-400px) rotateY(360deg); 44 } 45 } 46 .box:hover { 47 /* 鼠标经过时暂停动画 */ 48 animation-play-state: paused; 49 } 50 </style> 51 <body> 52 <div class="box"> 53 <div class="lb"> 54 <img src="images/lb1.png" alt=""> 55 </div> 56 <div class="lb"> 57 <img src="images/lb2.png" alt="" 58 </div> 59 <div class="lb"> 60 <img src="images/lb3.png" alt=""> 61 </div> 62 <div class="lb"> 63 <img src="images/lb4.png" alt=""> 64 </div> 65 </div> 66 </body>
效果：
标签：body package enter inf 时长 function 语法 translate strip
原文地址：https://www.cnblogs.com/cnlisiyiii-stu/p/11626701.html
