CSS3圆形时钟效果代码
分类:实例代码
本章节分享一段代码实例,它实现了圆形时钟效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .divBox { width: 600px; height: 600px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; } .circle { width: 400px; height: 400px; border-radius: 50%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; border: 12px solid #000; } .line { height: 20px; width: 0px; border: 8px solid #000; position: absolute; } .lineTop { top: 0px; left: 0px; right: 0px; margin: 0 auto; } .lineBottom { bottom: 0px; left: 0px; right: 0px; margin: 0 auto; } .lineLeft { left: 0px; top: 0px; bottom: 0px; margin: auto; transform: rotate(90deg); } .lineRight { right: 0px; top: 0px; bottom: 0px; margin: auto; transform: rotate(90deg); } .line1 { height: 10px; border: 4px solid #000; position: absolute; top: 27px; right: 98px; transform: rotate(30deg); } .line2 { height: 10px; border: 4px solid #000; position: absolute; top: 98px; right: 27px; transform: rotate(60deg); } .line4 { height: 10px; border: 4px solid #000; position: absolute; bottom: 98px; right: 27px; transform: rotate(-60deg); } .line5 { height: 10px; border: 4px solid #000; position: absolute; bottom: 27px; right: 98px; transform: rotate(-30deg); } .line7 { height: 10px; border: 4px solid #000; position: absolute; bottom: 27px; left: 98px; transform: rotate(30deg); } .line8 { height: 10px; border: 4px solid #000; position: absolute; bottom: 98px; left: 27px; transform: rotate(60deg); } .line10 { height: 10px; border: 4px solid #000; position: absolute; top: 98px; left: 27px; transform: rotate(-60deg); } .line11 { height: 10px; border: 4px solid #000; position: absolute; top: 27px; left: 98px; transform: rotate(-30deg); } .center { width: 0px; height: 0px; border-radius: 50%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; border: 20px solid #000; } .hourLine { width: 120px; border: 6px solid #000; border-top-right-radius: 50%; border-bottom-right-radius: 50%; position: absolute; left: 132px; right: 0px; margin: 197px auto; transform: rotate(-90deg); animation: hour 43200s linear infinite; } .minuteLine { width: 130px; border: 4px solid #000; position: absolute; left: 138px; right: 0px; margin: 197px auto; transform: rotate(-90deg); animation: minute 3600s linear infinite; } .secondLine { width: 140px; border: 2px solid #000; position: absolute; left: 144px; right: 0px; margin: 197px auto; transform: rotate(-90deg); transform-origin: 0% 50%; animation: second 60s linear infinite; } @keyframes second { 0% { transform: rotate(-90deg); } 100% { transform: rotate(270deg); } } @keyframes minute { 0% { transform: rotate(-90deg); } 100% { transform: rotate(270deg); } } @keyframes hour { 0% { transform: rotate(-90deg); } 100% { transform: rotate(270deg); } } </style> </head> <body> <div class="divBox"> <div class="circle"> <div class="line lineTop"></div> <div class="line lineBottom"></div> <div class="line lineLeft"></div> <div class="line lineRight"></div> <div class="line_1 line1"></div> <div class="line_1 line2"></div> <div class="line_1 line4"></div> <div class="line_1 line5"></div> <div class="line_1 line7"></div> <div class="line_1 line8"></div> <div class="line_1 line10"></div> <div class="line_1 line11"></div> <div class="center"></div> <div class="hourLine"></div> <div class="minuteLine"></div> <div class="secondLine"></div> </div> <div class="lineDom"> </div> </div> </body> </html>