HTML复杂动画和变形
1、复杂动画
（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>效果如下：
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>变形效果如下：
原文：https://www.cnblogs.com/czy18227988114/archive/2019/10/07/11629634.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
