纯css3实现五星型动效
animation的使用
animation-direction的四个值
1.normal：默认值，不进行反方向播放；
2.reverse：全部播放都是用反方向播放；
3.alternate：在奇数次数（1、3、5）的时候正向播放，偶数次数（2、4、6）进行反向播放；
4.alternate-reverse：在偶数次数（1、3、5）的时候正向播放，奇数次数（2、4、6）进行反向播放；
animation-timing-function属性（时间曲线）
`animation-timing-function`属性是为动画制定从开始到结束时的播放速度曲线，比如由快到慢，或者由慢到快等；
animation-timing-function的几个值
1.linear：表示动画一直以匀速进行播放；贝赛尔函数cubic-bezier(0,0,0.25,1)
2.ease：默认值，表示动画先慢后快，在即将结束时再变慢；cubic-bezier(0.25,0.1,0.25,1)
3.ease-in：动画由慢到快直至结束；cubic-bezier(0.42,0,1,1)
4.ease-out：动画由快到慢直至结束；cubic-bezier(0,0,0.58,1)
5.ease-in-out：动画由慢到快再到慢直至结束，与ease不同的是它均等得分为三份，而ease是只在结束时变慢；cubic-bezier(0.42,0,0.58,1)
6.标注时间：也可以直接标注一个时间(以s做单位)来规定动画全称以该速度进行播放；
7.贝赛尔函数：也可以使用贝赛尔函数来对动画的播放时间曲线进行规定；
代码附上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五角星</title>
<style>
body {
margin: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #060c21;
}
.box {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}
.box div {
position: absolute;
width: 80%;
height: 80%;
border: 2px solid #fff;
animation: move 5s linear infinite;
}
.box .box2 {
animation-direction: reverse;
}
.box .box3 {
animation-duration: 3s;
}
@keyframes move {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
替换正方形，使用border-radius设置不规则⭕️
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆形旋转效果</title>
<style>
body{
margin:50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #060c21;
}
.box{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}
.box div{
position: absolute;
width: 80%;
height: 80%;
border:2px solid #fff;
animation: move 3s linear infinite;
}
.box .box1{
border-radius: 66% 34% 70% 30% / 51% 72% 28% 49% ;
}
.box .box2{
border-radius: 40% 60% 43% 57% / 68% 37% 63% 32% ;
animation-direction: reverse;
}
.box .box3{
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;
animation-duration: 2s;
}
.box h1{
color: #fff;
}
@keyframes move {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<h1>loading</h1>
</div>
</body>
</html>
