<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> </head> <style type="text/css"> * { margin: 0; padding: 0; } @keyframes minute { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes second { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .time { 300px; height: 300px; border-radius: 50%; background: #F2D298; border:5px solid #F2D298; margin:0 auto; position: relative; } .minute { 10px; height: 100px; background-color: #F4EBEB; position: absolute; left: 150px; top: 60px; /*ainimation:name duration timing-function delay iteration-count direction;*/ animation: minute 3600s linear 0s infinite; transform-origin:5px bottom; } .second { 7px; height: 140px; background-color: #F4EBEB; position: absolute; left: 2px; top: -40px; animation:second 60s linear 0s infinite; transform-origin:2px bottom; } </style> <body> <!-- 实现钟表动画 --> <div class="time"> <div class="minute"> <div class="second"></div> </div> </div> </body> </html>
以上是使用简单的css3动画实现的，有兴趣的朋友可以完善下，欢迎指点