效果图如下 ：

代码如下：

 <!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. Python练习笔记——编写一个阶乘函数

    当输入一个数字时,函数自动计算该数的 阶乘 def factorial(num): j = 1 for i in range(1,num+1): j = j*i print(j) num = int( ...

  2. 代码解说Android Scroller、VelocityTracker

    在编写自己定义滑动控件时经常会用到Android触摸机制和Scroller及VelocityTracker.Android Touch系统简单介绍(二):实例具体解释onInterceptTouchE ...

  3. STL应用之set

    之前在解决一道算法题的时候,应用到set,特意对这个stl的容器类做了一些了解.在我的印象中,set就是一个元素不重复的集合,而事实上也正是这样的.无论从MSDN还是任何其它地方,都会告诉我们set的 ...

  4. oracle ORA-00119和ORA-00132解决方法

    ORA-00119 ORA-00132解决方法. 思路:*.local_listener错误导致.要*.local_listener就要修改spfile文件,因为oracle默认是以spfile文件启 ...

  5. ps曲线

    >>曲线的基本原理. 输入:在坐标的底部横着的是输入,显示的是当前图片上的颜色信息. 输出:竖着的是输出线,使我们调整图片的输出结果. 输入和输出轴上都有一条明暗信息,告诉我们那边是阴影那 ...

  6. e到底是什么？

    e到底是什么? 今天看到一个下面这么一个简单的求极限问题- 一时恍惚了,为什么结果是e^m. 这个e是什么呢? 然后就百度了下,发现不少文章介绍这个e. 有几篇写得很赞 - An Intuitive ...

  7. linux修改yum本地源的方法

    CentOS 系统下修改yum本地源: mkdir /mnt/cdrom/ cd /etc/yum.repos.d/mv CentOS-Base.repo CentOS-Base.repo.bakvi ...

  8. 模拟多级复选框效果的jquery代码

    jquery做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现 ...

  9. 每日英语：Apple's Latest iPhone Puts Focus Back on Fingerprint Security

    Apple's latest product launch could breathe new life into a technology that failed to take hold the ...

  10. PHP5.4新特性之上传进度支持Upload progress

    在PHP5.4版本当中给我们提供了好用的特性,上传进度的支持,我们可以配合Ajax动态获取SESSION当中的上传进度: 在使用这一特性之前,需要现在php.ini文件当中进行相应的设置:   1 2 ...