css 3 制作水波状进度条

效果图如下：

代码如下：

 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>

css 3 制作水波状进度条相关推荐

css样式制作步骤流程进度条
效果图如下 html部分只需要一个ul列表即可(进度条首尾根据自身需求去做修改) css样式部分代码第一步:生成一个长方形效果第二步:根据:after在长方形后面生成一个三角形第三步:修改后面三 ...
Android水波效果进度条
Android,水波进度条转载于:http://blog.csdn.net/u010386612/article/details/50751796 一.前言这个自定义控件并不是我写的,而是Gith ...
CSS 奇技淫巧Box-shadow实现圆环进度条
CSS 奇技淫巧Box-shadow实现圆环进度条文章目录 CSS 奇技淫巧Box-shadow实现圆环进度条一.Box-shadow圆环进度条二.效果预览三.原理刨析四.实际应用五.总结 ...
在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果
css怎么实现圆形渐变进度条效果发布时间:2021-03-17 10:29:57 来源:亿速云阅读:129 作者:小新这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容.小编觉得挺 ...
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
文章目录一.圆形加载动画二.上下跳动的圆球加载动画三.3D立体加载动画四.饼图加载动画五.多色圆点波动效果的加载动画六.制作顺时针放大的圆圈加载动画七.制作小圆圈轮流放大的加载动画八. ...
前端圆形进度图_图解CSS3制作圆环形进度条的实例教程
首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: CSS Code复制内容到剪贴板 .circleprogress{ width:160px; height ...
HTML5+CSS+JQuery 实现简单的进度条功能
样式: <style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2 ...
CSS锥形渐变实现环形进度条
10月份因为疫情原因.又开启了居家办公模式,空闲之余,与其选择"躺平",不如去做一些有意义的事情,内心的想法驱使着我去做些什么,但是又没有合适的素材,直到接手了最近的一个可视化项目 ...
使用css渐变色。实现动态进度条效果
基本上现在的ui框架都有自己的进度条组件封装但是有的时候我们需要自己定制的时候还是比较麻烦比如下面的这个效果双色进度条贴合效果.可能有点业务会用到吧就是使用渐变色和动画的效果实现, 第 ...
用python制作特效_万能的Python，还能用来制作高大上的进度条？
对于开发或者运维来说,使用Python去完成一些跑批任务,或者做一些监控事件是非常正常的情况.那么如何有效的监控任务的进度,除了在任务中加上log外,还能不能有另一种方式来了解任务进展到哪一步了呢? ...

css 3 制作水波状进度条

css 3 制作水波状进度条相关推荐

最新文章

热门文章