纯CSS3时钟
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯CSS3时钟相关的知识，希望对你有一定的参考价值。
本来打算还做一下系统时间动态时钟，但是奔着纯CSS3的目的去就不加了。。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3时钟</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 body{ 12 font:700 20px/1 "Microsoft YaHei"; 13 } 14 .container{ 15 margin:100px 0 0 100px; 16 width:300px; 17 height:300px; 18 border:5px solid #000; 19 border-radius:50%; 20 -o-border-radius:50%; 21 -ms-border-radius:50%; 22 -moz-border-radius:50%; 23 -webkit-border-radius:50%; 24 position:relative; 25 } 26 .dot{ 27 width:10px; 28 height:10px; 29 background-color:#000; 30 border-radius:50%; 31 -o-border-radius:50%; 32 -ms-border-radius:50%; 33 -moz-border-radius:50%; 34 -webkit-border-radius:50%; 35 position:absolute; 36 top:50%; 37 left:50%; 38 margin:-5px 0 0 -5px; 39 z-index:3; 40 } 41 .hour{ 42 width:10px; 43 height:50px; 44 background-color:#000; 45 position:absolute; 46 top:50%; 47 left:50%; 48 z-index:0; 49 margin:-50px 0 0 -5px; 50 border-top-left-radius:5px; 51 -o-border-top-left-radius:5px; 52 -ms-border-top-left-radius:5px; 53 -moz-border-top-left-radius:5px; 54 -webkit-border-top-left-radius:5px; 55 border-top-right-radius:5px; 56 -o-border-top-right-radius:5px; 57 -ms-border-top-right-radius:5px; 58 -moz-border-top-right-radius:5px; 59 -webkit-border-top-right-radius:5px; 60 animation:move 43200s steps(12,end) infinite; 61 -o-animation:move 43200s steps(12,end) infinite; 62 -ms-animation:move 43200s steps(12,end) infinite; 63 -moz-animation:move 43200s steps(12,end) infinite; 64 -webkit-animation:move 43200s steps(12,end) infinite; 65 transform-origin:bottom; 66 -o-transform-origin:bottom; 67 -ms-transform-origin:bottom; 68 -moz-transform-origin:bottom; 69 -webkit-transform-origin:bottom; 70 } 71 .minute{ 72 width:6px; 73 height:100px; 74 background-color:#000; 75 position:absolute; 76 top:50%; 77 left:50%; 78 z-index:1; 79 margin:-100px 0 0 -3px; 80 border-top-left-radius:3px; 81 -o-border-top-left-radius:3px; 82 -ms-border-top-left-radius:3px; 83 -moz-border-top-left-radius:3px; 84 -webkit-border-top-left-radius:3px; 85 border-top-right-radius:3px; 86 -o-border-top-right-radius:3px; 87 -ms-border-top-right-radius:3px; 88 -moz-border-top-right-radius:3px; 89 -webkit-border-top-right-radius:3px; 90 animation:move 3600s steps(60,end) infinite; 91 -o-animation:move 3600s steps(60,end) infinite; 92 -ms-animation:move 3600s steps(60,end) infinite; 93 -moz-animation:move 3600s steps(60,end) infinite; 94 -webkit-animation:move 3600s steps(60,end) infinite; 95 transform-origin:bottom; 96 -o-transform-origin:bottom; 97 -ms-transform-origin:bottom; 98 -moz-transform-origin:bottom; 99 -webkit-transform-origin:bottom; 100 } 101 .second{ 102 width:2px; 103 height:130px; 104 background-color:red; 105 position:absolute; 106 top:50%; 107 left:50%; 108 z-index:2; 109 margin:-100px 0 0 -1px; 110 animation:move 60s steps(60,end) infinite; 111 -o-animation:move 60s steps(60,end) infinite; 112 -ms-animation:move 60s steps(60,end) infinite; 113 -moz-animation:move 60s steps(60,end) infinite; 114 -webkit-animation:move 60s steps(60,end) infinite; 115 transform-origin:center 76.923%; 116 -o-transform-origin:center 76.923%; 117 -ms-transform-origin:center 76.923%; 118 -moz-transform-origin:center 76.923%; 119 -webkit-transform-origin:center 76.923%; 120 } 121 .hour12{ 122 position:absolute; 123 left:50%; 124 margin-left:-12.336px; 125 margin-top:5px; 126 } 127 .hour3{ 128 position:absolute; 129 left:100%; 130 top:50%; 131 margin-left:-17.3438px; 132 margin-top:-10px; 133 } 134 .hour6{ 135 position:absolute; 136 left:50%; 137 top:100%; 138 margin-left:-6.1719px; 139 margin-top:-25px; 140 } 141 .hour9{ 142 position:absolute; 143 top:50%; 144 margin-left:5px; 145 margin-top:-10px; 146 } 147 148 </style> 149 <style id="animation"> 150 @keyframes move{ 151 to{ 152 transform:rotate(360deg); 153 -o-transform:rotate(360deg); 154 -ms-transform:rotate(360deg); 155 -moz-transform:rotate(360deg); 156 -webkit-transform:rotate(360deg); 157 } 158 } 159 @-o-keyframes move{ 160 to{ 161 transform:rotate(360deg); 162 -o-transform:rotate(360deg); 163 -ms-transform:rotate(360deg); 164 -moz-transform:rotate(360deg); 165 -webkit-transform:rotate(360deg); 166 } 167 } 168 @-ms-keyframes move{ 169 to{ 170 transform:rotate(360deg); 171 -o-transform:rotate(360deg); 172 -ms-transform:rotate(360deg); 173 -moz-transform:rotate(360deg); 174 -webkit-transform:rotate(360deg); 175 } 176 } 177 @-moz-keyframes move{ 178 to{ 179 transform:rotate(360deg); 180 -o-transform:rotate(360deg); 181 -ms-transform:rotate(360deg); 182 -moz-transform:rotate(360deg); 183 -webkit-transform:rotate(360deg); 184 } 185 } 186 @-webkit-keyframes move{ 187 to{ 188 transform:rotate(360deg); 189 -o-transform:rotate(360deg); 190 -ms-transform:rotate(360deg); 191 -moz-transform:rotate(360deg); 192 -webkit-transform:rotate(360deg); 193 } 194 } 195 </style> 196 </head> 197 <body> 198 <span>by scott</span> 199 <div class="container"> 200 <div class="dot"></div> 201 <div class="hour"></div> 202 <div class="minute"></div> 203 <div class="second"></div> 204 <div class="hour12">12</div> 205 <div class="hour3">3</div> 206 <div class="hour6">6</div> 207 <div class="hour9">9</div> 208 </div> 209 </body> 210 </html>
demo：http://wangpengfei15975.github.io/clock
以上是关于纯CSS3时钟的主要内容，如果未能解决你的问题，请参考以下文章