html圆形波浪流量统计,HTML-波浪水球

波浪水球实例

1.需要图片

2.需要JQuery,jquery-2.1.4.min.js

以下为源码:

html>

波浪水球

*{margin:0;padding:0;}

body{position:relative}

.bg{width:200px;height:200px;background:url("images/bg.gif") no-repeat;

background-position:-15px -51px;position:absolute;top:68px;left:72px;border-radius:50%;}

.circle:hover {}

.outline{width:200px;height:200px;border-radius:50%;border:2px solid #76BFDE;

position:absolute;top:66px;left:70px;}

.circle{width:250px;height:250px;transition:all 8s ease-in-out;border:8px solid #fff;

border-right-color: #76BFDE ;

position:fixed;top:35px;left:39px;overflow:auto;

/* border-bottom-color: #A0D0DE;  */

border-radius: 50%;}

$(function(){

$(".bg").animate({

backgroundPositionY:"-260px"

},10000);

$(".circle").css(

"transform","rotate(1440deg)"

);

});