在懒人之家看到的。。小小实现了一下几乎花掉一下午。。。好醉。。
虽然好像理一理框架,但是电脑上好难说。。。。
</pre><span style="font-size:14px;"><img src="webkit-fake-url://66ebb73d-e0e8-4814-80da-9f7b73c4e57c/image.tiff" alt="" />效果图大概这样。round是细框,test是小球,inner是实心圆。其实动的不是小球,是细框,但是因为小球在细框里所以带着小球一起动。可以get的技能:margin为负值,定位的方法,css animation的用法, 不同浏览器的兼容(-webkit- ...)</span><pre name="code" class="html"><!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>round</title>
<link type='text/css' rel='stylesheet' href='begin.css'>
</head>
<body>
<div id='wrapper'>
<div id='round'>
<div id='test'></div>
</div>
<div id='inner'>
<p></p>
</div>
</div>
</body>
</html>
*
{
margin:0px;padding:0px;
}
body
{
background-color: #f6f6f6;
}
#wrapper
{
position: absolute;
top:200px; left:500px;
}
#inner
{
width: 80px;height:80px;
border-radius:40px;
border-style: none;
background-color: yellow;
}
#inner p
{
width:80px;
}
#test
{
width:10px; height: 10px;
border-radius: 50%;
background-color:yellow;
position:relative;
left:10px;top:10px;
}
#round
{
width:100px; height: 100px;
border-radius: 50%;
border: 1px solid yellow;
animation:rond 3s infinite;
-webkit-animation:rond 3s infinite;
margin-bottom:-80px;
position:relative;
left:-10px;
top:10px;
}
@keyframes rond
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes rond
{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}