分享一段代码实例,它利用css3绘制钟表圆盘效果。
并且能够自动走动,当然由于是纯css3实现,所以不能够获取本地时间。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> .box { width: 300px; height: 300px; border-radius: 50%; border: 5px solid #ccc; margin: 100px auto; position: relative; } .kedu { width: 300px; height: 300px; border-radius: 50%; position: relative; overflow: hidden; } .kedu div { height: 300px; position: absolute; left: 50%; } .kedu div:nth-child(1) { width: 6px; background: #333; margin-left: -3px; } .kedu div:nth-child(2) { width: 2px; background: #666; margin-left: -3px; transform: rotate(30deg); } .kedu div:nth-child(3) { width: 2px; background: #666; margin-left: -3px; transform: rotate(60deg); } .kedu div:nth-child(4) { width: 6px; background: #333; margin-left: -3px; transform: rotate(90deg); } .kedu div:nth-child(5) { width: 2px; background: #666; margin-left: -3px; transform: rotate(120deg); } .kedu div:nth-child(6) { width: 2px; background: #666; margin-left: -3px; transform: rotate(150deg); } .disc { width: 20px; height: 20px; border-radius: 50%; background: #000; position: absolute; top: 50%; left: 50%; margin-left: -10px; margin-top: -10px; z-index: 2; } .middisc { width: 260px; height: 260px; border-radius: 50%; background: #fff; position: absolute; top: 50%; left: 50%; margin-left: -130px; margin-top: -130px; } .hour { width: 6px; height: 60px; background: #000; position: absolute; top: -50px; left: 50%; margin-left: -3px; transform-origin: bottom center; animation: move 43200s steps(60) 0s infinite; } .minu { width: 4px; height: 80px; background: green; position: absolute; top: -70px; left: 50%; margin-left: -2px; transform-origin: bottom center; animation: move 3600s steps(60) 0s infinite; } .second { width: 2px; height: 100px; background: #f00; position: absolute; top: -90px; left: 50%; margin-left: -1px; transform-origin: bottom center; -webkit-animation: move 60s steps(60) infinite; } .cover { width: 20px; height: 20px; border-radius: 50%; background: #000; position: absolute; } @keyframes move { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="box"> <div class="kedu"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="disc"> <div class="hour"></div> <div class="minu"></div> <div class="second"></div> <div class="cover"></div> </div> <div class="middisc"> </div> </div> </body> </html>
css3动态圆形钟表效果,这样的场景在实际项目中还是用的比较多的,关于css3动态圆形钟表效果就介绍到这了。
css3动态圆形钟表效果属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98632.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。