效果图如下 ：

代码如下：

 <!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. 【Linux】目录配置

    为什么每套Linux distributions的配置文件.执行文件.每个目录内放置的文件其实都差不多?因为有一套需要依据的标准!我们底下就来瞧一瞧. 因为利用Linux来开发产品或distribut ...

  2. jquery中 $ 和 jQuery 及 $() 的区别

    用过jquery的人都知道,jquery有两种用法,一种是$,还有一种是jQuery,那么这两种方式在使用上有什么区别呢? 答案是这两种用法没什么区别,只是别名而已,用$要比jQuery简短一些.方便 ...

  3. Unix环境高级编程(十六)进程间通信

    进程间通信(IPC)是指能在两个进程间进行数据交换的机制.现代OS都对进程有保护机制,因此两个进程不能直接交换数据,必须通过一定机制来完成. IPC的机制的作用: (1)一个软件也能更容易跟第三方软件 ...

  4. Unix环境高级编程(一)文件I/O

    Unix系统中大多数文件I/O只需用到五个函数:open.read.write.lseek.close.本章说介绍的I/O是不带缓冲的,即:每个read和write都调用内核中的一个系统调用.不是IS ...

  5. 利用WGET下载文件，并保存到指定目录

    wget是Linux上一个非常不错的下载指令,也算是Linux工作者常用的指令之一 而这个指令我想在各大系统都预设有提供,包括了Ubuntu.Fedora等,而一般来说,要使用wget下载档案,只需要 ...

  6. Install Ambari 2.2.0 from Public Repositories（Hadoop）

    Step1: Download the Ambari repository on the Ambari Server host For Redhat/CentOS/Oracle:   cd /etc/ ...

  7. js实现页面时间动态变化

    利用函数嵌套和setTimeout函数实现时间动态变化 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYe ...

  8. css 样式使用方法的累积

    我们直接看样例然后在来解释使用方法. <!DOCTYPE html> <html> <head> <style> input[type="ch ...

  9. 如何使用Redis做MySQL的缓存

    应用Redis实现数据的读写,同时利用队列处理器定时将数据写入mysql. 同时要注意避免冲突,在redis启动时去mysql读取所有表键值存入redis中,往redis写数据时,对redis主键自增 ...

  10. angular学习笔记(五)-阶乘计算实例(3)

    同样是上一个例子,我们要求并非实时的计算结果,而是等到用户确定自己已经输入完毕,然后进行计算: <!DOCTYPE html> <html ng-app> <head&g ...