@keyframes rote-loading {
from {
rotate: 0deg;
}
to {
rotate: 360deg;
}
}
@keyframes translate-loading {
from {
width: 0%;
}
to {
width: 100%;
}
}
* {
margin: 0;
padding: 0;
}
.rotate {
display: flex;
margin: auto;
}
.one {
height: 100px;
width: 100px;
background-color: transparent;
margin: auto;
border: 5px solid;
border-color: red rgb(4, 0, 250);
border-radius: 50%;
animation: rote-loading 2s linear infinite;
}
.two {
height: 100px;
width: 100px;
background-color: transparent;
margin: auto;
border: 5px solid hsl(160, 88%, 50%);
border-color: red transparent;
border-radius: 50%;
animation: rote-loading 2s linear infinite;
}
.three {
height: 100px;
width: 100px;
background-color: transparent;
margin: auto;
border: 5px dashed hsl(160, 88%, 50%);
border-color: red transparent;
border-radius: 50%;
animation: rote-loading 2s linear infinite;
}
.translate-out {
width: 100%;
height: 100px;
background-color: #ccc;
/* animation: translate-loading 2s linear infinite; */
/* transition: all 4s; */
}
.add1 {
animation: translate-loading 2s linear infinite;
}
/* .Two:hover {
width: 0;
} */
.translate {
width: 0%;
height: 100%;
background-color: #f00;
animation: translate-loading 5s linear infinite;
}
其中rote-loading是旋转动画,translate-loading是移动动画
<div class="rotate">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="translate-out">
<div class="translate"></div>
</div>
<div class="translate-out add1"></div>
其中one,two,three只是旋转的不同样式,感兴趣的可以去自己复制代码瞧瞧
css博大精深,自己也只能算入门了,害