CSS3 实现的钟表效果代码实例
分类:实例代码
分享一段代码实例,它利用CSS3实现了钟表效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .clock{ width:200px; height:200px; border-radius:100%; position:relative; background-image:url(demo/CSS/img/zhongbiao.jpg); background-size:100%; } .line{ height:4px; background-color:red; margin-left:-15px; margin-top:-2px; } .original{ position:absolute; left:50%; top:50%; width:1px; height:1px; float:left; } .clock>.point{ position:absolute; top:50%; left:50%; margin-left:-5px; margin-top:-6px; width:3px; height:3px; padding:5px; background-color:red; border-radius:13px; } .original.seconds{ -webkit-animation:rotate_origin 60s linear infinite; animation:rotate_origin 60s linear infinite; } .original.seconds>.line{ background-color:red; width:100px; height:2px; } .original.minutes{ -webkit-animation:rotate_origin 3600s linear infinite; animation:rotate_origin 3600s linear infinite; } .original.minutes>.line{ background-color:blue; width:80px; height:3px; } .original.hours{ -webkit-animation:rotate_origin 86400s linear infinite; animation:rotate_origin 86400s linear infinite; } .original.hours>.line{ width:60px; background-color:green; } @-webkit-keyframes rotate_origin{ from{ -webkit-transform:rotateZ(0deg); } to{ -webkit-transform:rotateZ(360deg); } } @keyframes rotate_origin{ from{ transform:rotateZ(0deg); } to{ transform:rotateZ(360deg); } } </style> </head> <body> <div class="clock"> <div class="original hours"> <div class="line"></div> </div> <div class="original minutes"> <div class="line"></div> </div> <div class="original seconds"> <div class="line"></div> </div> <div class="point"></div> </div> </body> </html>
CSS3 实现的钟表效果代码实例,这样的场景在实际项目中还是用的比较多的,关于CSS3 实现的钟表效果代码实例就介绍到这了。
CSS3 实现的钟表效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。