效果图如下 ：

代码如下：

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

       @-webkit-keyframes spin {

           from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}

           to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}

       }

       @keyframes spin {

           from{-webkit-transform: rotate(0deg);transform: rotate(0deg);}

           to{-webkit-transform: rotate(360deg);transform: rotate(360deg);}

       }

       .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;}

       .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}

       .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; }

       .tips{color: #fd6b65;font-size: 28px;line-height: 184px;text-align: center;}

     </style>

   </head>

   <body>

     <div class="wave-progress">

       <div class="inner">

         <div class="water"></div>

         <div class="tips">1%</div>

       </div>

     </div>

   </body>

   <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

   <script type="text/javascript">

     var topNum = 100;

     var timer = setInterval(function(){

       $(".water").css({"top":topNum+"%"});

       topNum -= 0.05;

       var text = parseInt(100 - topNum)+"%";

       $(".tips").text(text);

       if(topNum <= 0){

         clearInterval(timer);

       }

     },1);

   </script>

 </html>

css 3 制作水波状进度条的更多相关文章

  1. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  2. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  3. 使用 new XMLHttpRequest() 制作下载文件进度条

    mui 进度控件使用方法: 检查当前容器(container控件)自身是否包含.mui-progressbar类: 当前容器包含.mui-progressbar类,则以当前容器为目标控件,直接显示进度 ...

  4. 【CSS系列】网页头部进度条方式一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. html + css + jquery实现简单的进度条实例

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  6. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

  7. css and canvas实现圆形进度条

    进度条效果:   话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒 ...

  8. HTML5+CSS+JQuery 实现简单的进度条功能

    样式: <style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2 ...

  9. Unity3D中制作Loading场景进度条

    背景 通常游戏的主场景包含的资源较多,这会导致加载场景的时间较长.为了避免这个问题,可以首先加载Loading场景,然后再通过Loading场景来加载主场景.由于Loading场景包含的资源较少,所以 ...

随机推荐

  1. C# -- 等待异步操作执行完成的方式 C# -- 使用委托 delegate 执行异步操作 JavaScript -- 原型：prototype的使用 DBHelper类连接数据库 MVC View中获取action、controller、area名称、参数

    C# -- 等待异步操作执行完成的方式 C# -- 等待异步操作执行完成的方式 1. 等待异步操作的完成,代码实现: class Program { static void Main(string[] ...

  2. Socket详解-Linux Socket编程（不限Linux）

    “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览 ...

  3. oc 类的使用

    //定议一个Hello类,用@interface @end包着,并且继承NSObject @interface Hello : NSObject{ int num; }//包在大括号里面是私有的属性, ...

  4. Okhttp常用方法示例

    这是我用到的一个util类 public class HttpBaseService { private OkHttpClient client = new OkHttpClient(); priva ...

  5. mpu6050 DMP库的移植

    https://www.amobbs.com/thread-5528472-1-1.html 官方的运动库,必须通过这个才能启用MPU6050的DMP引擎(数据手册里完全不提这个东西,必须在官网注册登 ...

  6. IE兼容模式下 SCRIPT1028: 缺少标识符、字符串或数字

    例如下面一段代码 var a = { x: 1, y: 2, }; alert(a.x); 如果在IE的兼容性视图(IE7文档模式)下,会报告下面的错误: SCRIPT1028: 缺少标识符.字符串或 ...

  7. 分享下今天研究的流量上限DDos攻击分析和解决方式

    分享下今天研究的流量上限DDos攻击分析和解决方式 常常听到或者碰到某个站点被攻击.一般都是流量攻击.今天自己写了个程序測下相关的上限,程序仅仅简单做了个get html操作(不包括图片等资源文件). ...

  8. jquery data方法获取某个元素上事件

    获取某个元素上的事件,jquery的给元素绑定的事件可以用data方法取出来. 通过$(element).data("events")来获取 // 比如给一个button绑定两个c ...

  9. php批量删除数据库下指定前缀的表

    如何用php批量删除数据库下所有前缀为prefix_的表. 例子,统一删除前缀为“prefix_”的表. <?php //设置数据库连接信息.数据库服务器地址,数据库用户名,数据密码 mysql ...

  10. [svc][op]ssh交互yes问题解决-expect

    Expect是Unix系统中用来进行自动化控制和测试的软件工具C67默认未安装:使用需要安装: yum install expect -ywhich expect #查看安装路径 核心命令: [roo ...