一个纯CSS加载动画
2021-09-10 11:39:00
一个很好看的CSS加载动画。
<!-- html -->
<div class="loader"></div>
/*CSS*/
@keyframes wiggle{
0% {
transform:rotate(0) scale(1)
}
50% {
transform:rotate(180deg) scale(.5)
}
100% {
transform:rotate(360deg) scale(1)
}
}
.loader{
margin: 0 auto;
display: inline-block;
width: 100%;
text-align: center;
height: 50px;
}
.loader::after, .loader::before{
box-sizing: border-box;
content: "";
width: 50px;
height: 50px;
position: absolute;
border: 8px solid transparent;
border-radius: 50%;
animation: wiggle 1.4s ease infinite;
}
.loader::before{
border-top-color: #4285f4;
border-bottom-color: #34a853;
}
.loader::after{
border-left-color: #fbbc05;
border-right-color: #ea4335;
animation-delay: .7s;
}