Home >Web Front-end >HTML Tutorial >纯CSS3时钟_html/css_WEB-ITnose
纯CSS3时钟_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:25:391118browse
本来打算还做一下系统时间动态时钟，但是奔着纯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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：postMessage处理iframe 跨域问题_html/css_WEB-ITnoseNext article：css3 @media 实现响应式布局_html/css_WEB-ITnose