css 3 制作水波状进度条

最新推荐文章于 2024-08-02 12:45:00 发布

weixin_34037173

最新推荐文章于 2024-08-02 12:45:00 发布

阅读量1.6k

点赞数

文章标签：前端 javascript ViewUI

效果图如下：

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7       @-webkit-keyframes spin {
 8           from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
 9           to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
10       }
11       @keyframes spin {
12           from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
13           to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
14       }
15       .wave-progress{width:200px;height:200px;margin:10px auto;border: 8px solid #fd6b65;border-radius:50%;background-color: #f8f8f8;box-sizing: border-box;position: relative;}
16       .wave-progress .inner{position: absolute;width:100%;height:100%;border-radius:50%;overflow: hidden; border: 6px solid #ffafac;box-sizing: border-box;z-index: 10}
17       .wave-progress .inner .water{position: absolute;width: 200%;height: 200%;left: -50%;border-radius: 40%;background:rgba(255,175,172,0.3);-webkit-animation:spin 10s linear infinite;animation:spin 10s linear infinite; }
18       .tips{color: #fd6b65;font-size: 28px;line-height: 184px;text-align: center;}
19 
20     </style>
21   </head>
22   <body>
23     <div class="wave-progress">
24       <div class="inner">
25         <div class="water"></div>
26         <div class="tips">1%</div>
27       </div>
28     </div>
29   </body>
30   <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
31   <script type="text/javascript">
32     var topNum = 100;
33     var timer = setInterval(function(){
34       $(".water").css({"top":topNum+"%"});
35       topNum -= 0.05;
36       var text = parseInt(100 - topNum)+"%";
37       $(".tips").text(text);
38       if(topNum <= 0){
39         clearInterval(timer);
40       }
41     },1);
42   </script>
43 </html>