波浪水球实例
1.需要图片
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("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%;}
</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>
本文出自 “wennuanyiran” 博客，请务必保留此出处http://dingzhaoqiang.blog.51cto.com/5601059/1697090
原文地址：http://dingzhaoqiang.blog.51cto.com/5601059/1697090
