CSS圓形加載動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #0099FF;
}
.test{
width: 180px;
height: 180px;
border: solid 10px rgba(255,255,255,0);
border-radius: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
animation: clip 5s linear infinite;
}
.test::before{
content: '';
position: absolute;
width: 180px;
height: 180px;
border-radius: 200px;
border: solid 10px rgba(255,255,255,0);
border-top-color: rgba(255,255,255,1) !important;
border-left-color: rgba(255,255,255,1) !important;
left: -10px;
top: -10px;
transform: rotate(-45deg);
animation: before 5s linear infinite;
}
.test::after{
content: '';
position: absolute;
width: 180px;
height: 180px;
border-radius: 200px;
border: solid 10px rgba(255,255,255,0);
border-top-color: rgba(255,255,255,1) !important;
border-left-color: rgba(255,255,255,1) !important;
left: -10px;
top: -10px;
transform: rotate(-45deg);
animation: after 5s linear infinite;
}
@keyframes clip{
0% {clip: rect(0,200px,200px,100px);}
100% {clip: auto;}
}
@keyframes before{
0% {transform: rotate(-45deg);}
50% {transform: rotate(135deg);}
100% {transform: rotate(135deg);}
}
@keyframes after{
0% {transform: rotate(-45deg);}
50% {transform: rotate(135deg);}
100% {transform: rotate(315deg);}
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
效果如下
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)