效果展示：
源码展示：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css3动画实现轨道旋转效果</title> <style> body { background-color:blueviolet; } .circle1 { margin-top:100px; width:100px; height:100px; border-radius:100px; position:absolute; z-index:2; left:140px; -webkit-animation:myfirst1 5s linear infinite; } @-webkit-keyframes myfirst1 { 0% { transform:rotate(0deg); box-shadow:0px 0px 10px #fff; } 50% { transform:rotate(180deg); box-shadow:0px 0px 45px #fff; } 100% { transform:rotate(360deg); box-shadow:0px 0px 10px #fff; } }.circle2 { width:10px; height:10px; border:4px solid #ddd; border-radius:20px; left:45px; top:5px; position:absolute; z-index:2; overflow:hidden; background-color:#ddd; box-shadow:0px 0px 5px #fff; } </style> </head> <body> <div class="circle1"> <div class="circle2"></div> </div>
<pre style="color:red"> 感： 最近贡献一下我在教学中的小案例 希望能给你一些帮助
--王 </pre>
</body> </html>
