分享一个纯CSS写的钟表式计时器
Posted 心心眼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分享一个纯CSS写的钟表式计时器相关的知识，希望对你有一定的参考价值。
话不多说，先上效果图
本demo没使用javascript，纯CSS3实现，下面是完整代码
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>时钟</title> 5 <style type="text/css"> 6 .screen{ 7 width: 400px; 8 height: 400px; 9 border-radius: 50%; 10 border: 3px solid black; 11 margin: 200px auto; 12 position: relative; 13 } 14 .line{ 15 width: 3px; 16 height: 400px; 17 background-color: #333333; 18 position: absolute; 19 left: 200px; 20 } 21 .line:nth-child(2){ 22 transform: rotateZ(30deg); 23 } 24 .line:nth-child(3){ 25 transform: rotateZ(60deg); 26 } 27 .line:nth-child(4){ 28 transform: rotateZ(90deg); 29 } 30 .line:nth-child(5){ 31 transform: rotateZ(120deg); 32 } 33 .line:nth-child(6){ 34 transform: rotateZ(150deg); 35 } 36 .cover{ 37 width: 380px; 38 height: 380px; 39 border-radius: 50%; 40 position: absolute; 41 left: 10px; 42 top: 10px; 43 background-color: #fff; 44 } 45 .hour{ 46 width: 8px; 47 height: 80px; 48 background-color: red; 49 position: absolute; 50 top: 120px; 51 left: 196px; 52 transform-origin: bottom; 53 animation: spin 43200s linear infinite; 54 } 55 .min{ 56 width: 6px; 57 height: 120px; 58 background-color: yellow; 59 position: absolute; 60 top: 80px; 61 left: 197px; 62 transform-origin: bottom; 63 animation: spin 3600s linear infinite; 64 } 65 .second{ 66 width: 4px; 67 height: 150px; 68 background-color: green; 69 position: absolute; 70 top: 50px; 71 left: 198px; 72 transform-origin: bottom; 73 animation: spin 60s linear infinite; 74 animation-timing-function: steps(60); 75 } 76 .center{ 77 width: 40px; 78 height: 40px; 79 border-radius: 50%; 80 background-color: orange; 81 position: absolute; 82 top: 180px; 83 left: 180px; 84 } 85 @keyframes spin{ 86 from{ 87 transform: rotateZ(0deg); 88 } 89 to{ 90 transform: rotateZ(360deg); 91 } 92 } 93 </style> 94 </head> 95 <body> 96 <div class="screen"> 97 <div class="line"></div> 98 <div class="line"></div> 99 <div class="line"></div> 100 <div class="line"></div> 101 <div class="line"></div> 102 <div class="line"></div> 103 <div class="cover"></div> 104 <div class="second"></div> 105 <div class="min"></div> 106 <div class="hour"></div> 107 <div class="center"></div> 108 </div> 109 </body> 110 </html>
其实很简单，就是用div结合CSS3的旋转属性把时分秒针画出来，再把刻度线等画一下；再利用CSS3的动画属性让3根针动起来即可。有兴趣的小伙伴也可以结合js代码获取当前时间并设定3根针的初始角度，让本demo变成一个实时的时钟哦~
女神镇楼
以上是关于分享一个纯CSS写的钟表式计时器的主要内容，如果未能解决你的问题，请参考以下文章