效果图：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../scss/IOS.css" />
<script src="../js/jquery/jquery-3.6.0.js"></script>
</head>
<body>
<div class="g-container">
<div class="g-number" id="div_text" style="margin-top: -74px;"></div>
<div class="g-contrast">
<div class="g-circle"></div>
<ul class="g-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
var a=0;
var b=0;
var c=0;
var d=0;
var time=$("#div_text").val();
setInterval(function (){
d++
if(d==9){
d=0;
c++;
} else if(c==9){
c=0;
b++;
}else if(b==9){
a++;
b=0;
}
if(b==9){
a++;
b=0;
}
if(a == 10){
clearInterval(interval);
}
$("#div_text").text(a+""+b+"."+c+""+d+"%");
},1);
</script>
</body>
</html>
SCSS代码（这里我是用考拉编译成css的，如果有不会的朋友可以参考我的另一篇文章课程学习中的SCSS）：
html,
body {
width: 100%;
height: 100%;
display: flex;
background: #000000;
overflow: hidden;
}
.g-number {
position: absolute;
width: 300px;
top: 27%;
text-align: center;
font-size: 32px;
z-index: 10;
color: #fff;
}
.g-container {
position: relative;
width: 300px;
height: 400px;
margin: auto;
}
.g-contrast {
filter: contrast(10) hue-rotate(0);
width: 300px;
margin-top: -70px;
height: 600px;
background-color: #000;
overflow: hidden;
animation: hueRotate 10s infinite linear;
}
.g-circle {
position: relative;
width: 300px;
height: 300px;
box-sizing: border-box;
filter: blur(8px);
&::after {
content: "";
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%) rotate(0);
width: 200px;
height: 200px;
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
animation: rotate 2s infinite linear;
}
&::before {
content: "";
position: absolute;
width: 176px;
height: 176px;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #000;
z-index: 10;
}
}
.g-bubbles {
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
height: 40px;
transform: translate(-50%, 0);
border-radius: 100px 100px 0 0;
background-color: #00ff6f;
filter: blur(5px);
}
li {
position: absolute;
border-radius: 50%;
background: #00ff6f;
}
@for $i from 0 through 15 {
li:nth-child(#{$i}) {
$width: 15 + random(15) + px;
left: 10 + random(70) + px;
top:50%;
transform: translate(-50%, -50%);
width: $width;
height: $width;
animation: moveToTop #{random(1) + 0}s ease-in-out -#{random(5000)/1000}s infinite;
}
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: .1;
transform: translate(-10%, -330px);
}
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}
标签：SCSS,特效,rotate,50%,IOS,height,width,background,position From： https://www.cnblogs.com/zsbb/p/16768013.html