console
<div class="circle" style="--completion: 20%">
<span>50</span>
<div class="bubbles">
<span class="bubble" style="--w: 8; --x: 10; --d: 5"></span>
<span class="bubble" style="--w: 9; --x: 50; --d: 3"></span>
<span class="bubble" style="--w: 4; --x: 30; --d: 2"></span>
<span class="bubble" style="--w: 5; --x: 80; --d: 1"></span>
<span class="bubble" style="--w: 4; --x: 30; --d: 5"></span>
<span class="bubble" style="--w: 4; --x: 70; --d: 6"></span>
<span class="bubble" style="--w: 6; --x: 20; --d: 8"></span>
<span class="bubble" style="--w: 8; --x: 50; --d: 4"></span>
<span class="bubble" style="--w: 4; --x: 60; --d: 3"></span>
<span class="bubble" style="--w: 6; --x: 65; --d: 4"></span>
</div>
</div>
<div class="textAnimate">
<span>文字颜色动画</span>
</div>
:root {
--completion: 0%;
}
.circle {
position: relative;
display: flex;
width: 100px;
height: 100px;
background: #fff;
border: 4px double #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
overflow: hidden;
}
.circle:after {
content: '';
position: absolute;
top: calc(100% - var(--completion));
left: 50%;
width: 200px;
height: 200px;
background-color: #a4eafd;
border-radius: 80px;
translate: -50% 0;
animation: spin 5s linear infinite;
-webkit-animation: spin 5s linear infinite;
}
.circle span {
z-index: 2
}
.bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
}
.bubble {
position: absolute;
left: calc(50% - calc(1px * calc(var(--w) / 2)));
bottom: -10%;
width: calc(1px * var(--w));
height: calc(1px * var(--w));
background: #fff;
border-radius: 50%;
opacity: 0;
animation: rise 3s infinite linear;
animation-delay: calc(600ms * var(--d))
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes rise {
0% {
left: calc(50% - calc(1px * calc(var(--w) / 2)));
bottom: -10%;
opacity: 0;
}
50% {
opacity: .8;
}
100% {
left: calc(1% * var(--x));
bottom: 90%;
opacity: 0;
}
}
.textAnimate {
margin-top: 40px;
}
.textAnimate span {
font-size: 40px;
}