css实现圆球顺时针滚动

来源：互联网发布：python netflix prize 编辑：程序博客网时间：2024/04/24 19:09

在懒人之家看到的。。小小实现了一下几乎花掉一下午。。。好醉。。

虽然好像理一理框架，但是电脑上好难说。。。。

</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);}}

0 0