效果图如下 ：

代码如下：

 <!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. 从一个activity返回

    页面之间的跳转有startActivity 和startActivityForResult两种, 返回的话用finish方法,如下示例 MyActivity.this.finish();那你返回按钮使 ...

  2. Android 自定义属性动画&Camera动画

      摘要: Android 自定义属性动画&Camera动画 1.相关知识点 对于Androi的帧动画,可以制作gif图片,有时为了能够动态的生成帧动画,就得需要使用代码构建了 Animati ...

  3. oracle关键字大全--注意不要乱用哦

    遇到怀疑可能使用了关键字,就来搜一搜吧 ... Oracle 关键字(保留字) 大全 其实这个东西可以在oracle 上输入一个sql语句就可以得到: select * from v$reserved ...

  4. 解决dva dispatch yield生成器函数中异常中断，无法继续调用的问题

    在生成器函数中,哪怕是一点报错.都会导致程序无法再次执行.这是yield的特性导致的.最简单的解决方案,就是将所有报错回避,并且做好交互. 0.dva全局管理出错状态 https://dvajs.co ...

  5. 解决电脑需要切换IP带来的MySQL连接问题

    直接上代码: import socket #获取本机电脑名 myname = socket.getfqdn(socket.gethostname( )) #获取本机ip myip = socket.g ...

  6. jmeter 发送http请求，并把获取到的请求的订单信息保存到文件中

    有一个任务,需要频繁发送订单请求,并分析订单请求中有没有存在重复订单号,思路是用jmeter 发送http请求,使用正则表达式获取到订单号,并把订单号和线程号作为参数提供给java请求,在java请求 ...

  7. 强制删除一个Windows服务

    一个挂起的服务如下图所示,该服务相关的所有按钮都被禁用,包括启动.停止.暂停和恢复. 要停止这个服务,首先记住这个服务的名称,在这里是 ‘EntropySoftCFS’. 然后打开命令行窗口,运行 s ...

  8. controller与requestmapping

    使用@controller定义controllersSpring mvc将特定url的请求分发到controller类来进行处理在spring 3.0中,通过@controller标注即可将class ...

  9. NEXYS 3开发板练手--USB UART(一)

    接上一篇文章,今天来讲讲这个USB UART串口发送机. 我们知道,当我们的微处理器(单片机.FPGA.DSP等)要和电脑进行通信的时候一般会采用串行通信方式,而最常用的串行通信协议的物理层接口是RS ...

  10. Oracle PLSQL Demo - 09.Open、Fetch遍历游标[Open, Fetch, Close Record CURSOR]

    declare r_emp scott.emp%rowtype; cursor cur_emp is select t.* from scott.emp t; begin open cur_emp; ...