波浪水球实例


wKioL1YA-qbgMfVnAABgXZ5OvBE540.jpg


1.需要图片


wKioL1YA-XDQA0IHAACGbT0PuOg051.gif

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


以下为源码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>波浪水球</title>
  <style type="text/css">
*{margin:0;padding:0;}
body{position:relative}
  
.bg{width:200px;height:200px;background:url("p_w_picpaths/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%;}
  </style>
 </head>
 <body>
 
<div class="bg"></div>
<div class="outline"></div>
<div class="circle"></div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(".bg").animate({
backgroundPositionY:"-260px"
},10000);
$(".circle").css(
"transform","rotate(1440deg)"
);
});
</script>
 </body>
</html>