这篇“HTML怎么实现复杂动画和变形”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML怎么实现复杂动画和变形”文章吧。
(1)涉及到的属性:
animation-name:动画名称;
animation-duration:单次动画总时长;
animation-timing-function:时间函数;
animation-delay:播放前延时的时长;
animation-iteration-count:播放次数(具体的数字),当设置infinite时是循环播放;
animation-direction:播放顺序,其中normal是正常播放,alternate是轮流反向播放,播放次数必须在2次以上。
(2)书写方式
@keyframes 名字(自己取一个名字){ ——>定义一个动画
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>复杂动画练习</title> 9 </head> 10 <style> 11 .box { 12 width: 200px; 13 height: 200px; 14 background-color: blueviolet; 15 border: solid black; 16 position: relative; 17 top: 0; 18 /* 动画名称 */ 19 animation-name: demo; 20 /* 动画时长 */ 21 animation-duration: 5s; 22 /* 动画运行速度 */ 23 animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); 24 /* 播放前延迟的时长 */ 25 animation-delay: 3s; 26 /* 播放次数,这里写的时循环播放,可以写具体数字 */ 27 animation-iteration-count: infinite; 28 /* 播放顺序,这里写的时轮流反向播放,可以写normal正常播放 */ 29 animation-direction: alternate; 30 } 31 32 @keyframes demo { 33 from { 34 top: 0; 35 border-radius: 0; 36 } 37 20% { 38 top: 100px; 39 left: 100px; 40 border-radius: 30px; 41 } 42 50% { 43 top: 200px; 44 left: 100px; 45 border-radius: 30px 46 } 47 to { 48 top: 400px; 49 left: 400px; 50 border-radius: 50% 51 } 52 } 53 </style> 54 55 <body> 56 <div class="box"> 57 动画练习 58 <!-- <img src="img/2010011712541759.jpg" alt=""> --> 59 </div> 60 </body> 61 62 </html>
效果如下:
(1) 变形:通过变形可以改变盒子的视觉效果,变形不会改变盒子原本的位置和尺寸,因此不会对其他元素造成影响。
(2) 变形的类型
Translate(移动)
Scale(缩放,1以下是缩小,1以上是扩大)
Skew(倾斜,单位deg)
Rotate(旋转,默认是沿着Z轴旋转,单位deg)
(3) 定义原点
Transform-origin:设置盒子的中心点。
(4) 其他属性
背面可见性:backface-visibility
visible:默认值,背面可见
hidden:背面不可见
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>盒子变形</title> 9 </head> 10 <style> 11 .box { 12 width: 260px; 13 height: 260px; 14 position: relative; 15 } 16 17 .zheng, 18 .fan { 19 width: 260px; 20 height: 260px; 21 font-size: 26px; 22 border: solid black; 23 color: white; 24 text-align: center; 25 line-height: 260px; 26 position: absolute; 27 top: 0; 28 left: 0; 29 transition: all 1s; 30 backface-visibility: hidden; 31 } 32 33 .zheng { 34 background-color: blueviolet; 35 z-index: 2; 36 } 37 38 .fan { 39 background-color: green; 40 transform: rotateY(-180deg) rotateZ(-180deg); 41 } 42 43 .box:hover .zheng { 44 transform: rotateY(180deg) rotateZ(180deg); 45 } 46 47 .box:hover .fan { 48 transform: rotateY(0deg) rotateZ(0deg); 49 } 50 </style> 51 52 <body> 53 <div class="box"> 54 <div class="zheng">正面</div> 55 <div class="fan">反面</div> 56 </div> 57 </body> 58 59 </html>
以上就是关于“HTML怎么实现复杂动画和变形”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。