效果图如下 ：

代码如下：

 <!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. .Net4.0 任务(Task)[转]

    .Net4.0 任务(Task) 任务(Task)是一个管理并行工作单元的轻量级对象.它通过使用CLR的线程池来避免启动专用线程,可以更有效率的利用线程池.System.Threading.Tasks ...

  2. 10条建议让你创建更好的jQuery插件(转载)

    为了避免重复造轮子,自己手动开发jquery 插件,让小组其他成员可以直接使用.学习开发中,看到Phillip Senn 写的 关于jquery 插件开发注意10点,转载之! ------------ ...

  3. uploadify上传图片

    1.实现源代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

  4. mysql 一对多 group查询

    场景:查询所有A表的数据,并且关联B表,再数据集中插入一个COUNT列.该列的数据是B表的COUNT 扩展:假设join的表数据为空,但我任然要把所有表A的数据取出来,那就用LEFT JOIN SEL ...

  5. 在ASP.NET MVC5中使用特性路由

    首先在RegisterRoutes时开启特性路由功能: routes.MapMvcAttributeRoutes(); 然后,就可以使用了. [Route("{productId:int}/ ...

  6. android笔记-----消息提示

    在/res/values目录下的文件中定义要显示的字符串,主要是考虑到后期可能需要换成英文之类的 <string name="login_checkBlank">用户名 ...

  7. C#反射机制学习总结

    反射的定义:审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等. Syste ...

  8. 每日英语：Skull Shakes Up Human Family Tree

    A newly discovered 1.8 million-year-old skull offers evidence that humanity's early ancestors emerge ...

  9. jquery，checkbox无法用attr()二次勾选

    今晨,漂亮的测试妹妹提了个奇怪的bug,说我一功能checkbox时隐时现,比如第一次打开有勾选,第n次打开可能就不选了. 想到与美女有亲密接触机会,马上鸡动起来. 经过偶层层抽次剥茧(da da j ...

  10. mac os开发之简单动画

    [NSAnimationContextbeginGrouping]; [[NSAnimationContextcurrentContext] setDuration:.1f]; [[self.wind ...