web前端入门到实战:HTML复杂动画和变形
(1)涉及到的属性:
animation-name:动画名称;
animation-duration:单次动画总时长;
animation-timing-function:时间函数;
animation-delay:播放前延时的时长;
animation-iteration-count:播放次数(具体的数字),当设置infinite时是循环播放;
animation-direction:播放顺序,其中normal是正常播放,alternate是轮流反向播放,播放次数必须在2次以上。
(2)书写方式
@keyframes 名字(自己取一个名字){ ——>定义一个动画}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复杂动画练习</title></head><style> .box { width: 200px; height: 200px; background-color: blueviolet; border: solid black; position: relative; top: 0; /* 动画名称 */ animation-name: demo; /* 动画时长 */ animation-duration: 5s; /* 动画运行速度 */ animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); /* 播放前延迟的时长 */ animation-delay: 3s; /* 播放次数,这里写的时循环播放,可以写具体数字 */ animation-iteration-count: infinite; /* 播放顺序,这里写的时轮流反向播放,可以写normal正常播放 */ animation-direction: alternate; } @keyframes demo { from { top: 0; border-radius: 0; } 20% { top: 100px; left: 100px; border-radius: 30px; } 50% { top: 200px; left: 100px; border-radius: 30px } to { top: 400px; left: 400px; border-radius: 50% } }</style><body> <div class="box"> 动画练习 <!-- <img src="img/2010011712541759.jpg" alt=""> --> </div></body></html>web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
效果如下:
2、盒子变形(1) 变形:通过变形可以改变盒子的视觉效果,变形不会改变盒子原本的位置和尺寸,因此不会对其他元素造成影响。
(2) 变形的类型
Translate(移动)
Scale(缩放,1以下是缩小,1以上是扩大)
Skew(倾斜,单位deg)
Rotate(旋转,默认是沿着Z轴旋转,单位deg)
(3) 定义原点
Transform-origin:设置盒子的中心点。
(4) 其他属性
背面可见性:backface-visibility
visible:默认值,背面可见
hidden:背面不可见
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>盒子变形</title></head><style> .box { width: 260px; height: 260px; position: relative; } .zheng, .fan { width: 260px; height: 260px; font-size: 26px; border: solid black; color: white; text-align: center; line-height: 260px; position: absolute; top: 0; left: 0; transition: all 1s; backface-visibility: hidden; } .zheng { background-color: blueviolet; z-index: 2; } .fan { background-color: green; transform: rotateY(-180deg) rotateZ(-180deg); } .box:hover .zheng { transform: rotateY(180deg) rotateZ(180deg); } .box:hover .fan { transform: rotateY(0deg) rotateZ(0deg); }</style><body> <div class="box"> <div class="zheng">正面</div> <div class="fan">反面</div> </div></body></html>学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(从零基础开始到前端项目实战教程,学习工具,职业规划)
变形效果如下:
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。