效果图：

 

 

 

HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet"  href="../scss/IOS.css" />
  7.     <script src="../js/jquery/jquery-3.6.0.js"></script>
  8. </head>
  9. <body>
  10. <div class="g-container">
  11.     <div class="g-number" id="div_text" style="margin-top: -74px;"></div>
  12.     <div class="g-contrast">
  13.         <div class="g-circle"></div>
  14.         <ul class="g-bubbles">
  15.             <li></li>
  16.             <li></li>
  17.             <li></li>
  18.             <li></li>
  19.             <li></li>
  20.             <li></li>
  21.             <li></li>
  22.             <li></li>
  23.             <li></li>
  24.             <li></li>
  25.             <li></li>
  26.             <li></li>
  27.             <li></li>
  28.             <li></li>
  29.             <li></li>
  30.         </ul>
  31.     </div>
  32. </div>
  33. <script>
  34.     var a=0;
  35.     var b=0;
  36.     var c=0;
  37.     var d=0;
  38.     var time=$("#div_text").val();
  39.     setInterval(function (){
  40.         d++
  41.         if(d==9){
  42.             d=0;
  43.             c++;
  45.          } else if(c==9){
  46.             c=0;
  47.             b++;
  48.         }else if(b==9){
  49.             a++;
  50.             b=0;
  51.         }
  53.         if(b==9){
  54.             a++;
  55.             b=0;
  56.         }
  57.         if(a == 10){
  58.             clearInterval(interval);
  59.         }
  60.         $("#div_text").text(a+""+b+"."+c+""+d+"%");
  61.     },1);
  63. </script>
  64. </body>
  65. </html>

 

SCSS代码（这里我是用考拉编译成css的，如果有不会的朋友可以参考我的另一篇文章课程学习中的SCSS）：

  1. html,
  2. body {
  3.   width: 100%;
  4.   height: 100%;
  5.   display: flex;
  6.   background: #000000;
  7.   overflow: hidden;
  8. }
  10. .g-number {
  11.   position: absolute;
  12.   width: 300px;
  13.   top: 27%;
  14.   text-align: center;
  15.   font-size: 32px;
  16.   z-index: 10;
  17.   color: #fff;
  18. }
  20. .g-container {
  21.   position: relative;
  22.   width: 300px;
  23.   height: 400px;
  24.   margin: auto;
  25. }
  27. .g-contrast {
  28.   filter: contrast(10) hue-rotate(0);
  29.   width: 300px;
  30.   margin-top: -70px;
  31.   height: 600px;
  32.   background-color: #000;
  33.   overflow: hidden;
  34.   animation: hueRotate 10s infinite linear;
  35. }
  37. .g-circle {
  38.   position: relative;
  39.   width: 300px;
  40.   height: 300px;
  41.   box-sizing: border-box;
  42.   filter: blur(8px);
  44.   &::after {
  45.     content: "";
  46.     position: absolute;
  47.     top: 40%;
  48.     left: 50%;
  49.     transform: translate(-50%, -50%) rotate(0);
  50.     width: 200px;
  51.     height: 200px;
  52.     background-color: #00ff6f;
  53.     border-radius: 42% 38% 62% 49% / 45%;
  54.     animation: rotate 2s infinite linear;
  55.   }
  57.   &::before {
  58.     content: "";
  59.     position: absolute;
  60.     width: 176px;
  61.     height: 176px;
  62.     top: 40%;
  63.     left: 50%;
  64.     transform: translate(-50%, -50%);
  65.     border-radius: 50%;
  66.     background-color: #000;
  67.     z-index: 10;
  68.   }
  69. }
  71. .g-bubbles {
  72.   position: absolute;
  73.   left: 50%;
  74.   bottom: 0;
  75.   width: 100px;
  76.   height: 40px;
  77.   transform: translate(-50%, 0);
  78.   border-radius: 100px 100px 0 0;
  79.   background-color: #00ff6f;
  80.   filter: blur(5px);
  81. }
  83. li {
  84.   position: absolute;
  85.   border-radius: 50%;
  86.   background: #00ff6f;
  87. }
  89. @for $i from 0 through 15 {
  90.   li:nth-child(#{$i}) {
  91.     $width: 15 + random(15) + px;
  92.     left: 10 + random(70) + px;
  93.     top:50%;
  94.     transform: translate(-50%, -50%);
  95.     width: $width;
  96.     height: $width;
  97.     animation: moveToTop #{random(1) + 0}s ease-in-out -#{random(5000)/1000}s infinite;
  98.   }
  99. }
  101. @keyframes rotate {
  102.   50% {
  103.     border-radius: 45% / 42% 38% 58% 49%;
  104.   }
  105.   100% {
  106.     transform: translate(-50%, -50%) rotate(720deg);
  107.   }
  108. }
  110. @keyframes moveToTop {
  111.   90% {
  112.     opacity: 1;
  113.   }
  114.   100% {
  115.     opacity: .1;
  116.     transform: translate(-10%, -330px);
  117.   }
  118. }
  120. @keyframes hueRotate {
  121.   100% {
  122.     filter: contrast(15) hue-rotate(360deg);
  123.   }
  124. }