<div id= "watch" > |
<div class= "frame-face" ></div> |
<ul class= "minute-marks" > |
<li></li><li></li><li></li><li></li><li></li><li></li> |
<li></li><li></li><li></li><li></li><li></li><li></li> |
<li></li><li></li><li></li><li></li><li></li><li></li> |
<li></li><li></li><li></li><li></li><li></li><li></li> |
<li></li><li></li><li></li><li></li><li></li><li></li> |
<li></li><li></li><li></li><li></li><li></li><li></li> |
<li></li><li></li><li></li><li></li><li></li><li></li> |
<li></li><li></li><li></li><li></li><li></li><li></li> |
</ul> |
<div class= "digital-wrap" > |
<ul class= "digit-hours" > |
<li> 23 </li> |
<li> 00 </li><li> 01 </li><li> 02 </li><li> 03 </li><li> 04 </li><li> 05 </li> |
<li> 06 </li><li> 07 </li><li> 08 </li><li> 09 </li><li> 10 </li><li> 11 </li> |
<li> 12 </li><li> 13 </li><li> 14 </li><li> 15 </li><li> 16 </li><li> 17 </li> |
<li> 18 </li><li> 19 </li><li> 20 </li><li> 21 </li><li> 22 </li> |
</ul> |
<ul class= "digit-minutes" > |
<li> 10 </li><li> 11 </li> |
<li> 12 </li><li> 13 </li><li> 14 </li><li> 15 </li><li> 16 </li><li> 17 </li> |
<li> 18 </li><li> 19 </li><li> 20 </li><li> 21 </li><li> 22 </li><li> 23 </li> |
<li> 24 </li><li> 25 </li><li> 26 </li><li> 27 </li><li> 28 </li><li> 29 </li> |
<li> 30 </li><li> 31 </li><li> 32 </li><li> 33 </li><li> 34 </li><li> 35 </li> |
<li> 36 </li><li> 37 </li><li> 38 </li><li> 39 </li><li> 40 </li><li> 41 </li> |
<li> 42 </li><li> 43 </li><li> 44 </li><li> 45 </li><li> 46 </li><li> 47 </li> |
<li> 48 </li><li> 49 </li><li> 50 </li><li> 51 </li><li> 52 </li><li> 53 </li> |
<li> 54 </li><li> 55 </li><li> 56 </li><li> 57 </li><li> 58 </li><li> 59 </li> |
<li> 00 </li><li> 01 </li><li> 02 </li><li> 03 </li><li> 04 </li><li> 05 </li> |
<li> 06 </li><li> 07 </li><li> 08 </li><li> 09 </li> |
</ul> |
<ul class= "digit-seconds" > |
<li> 20 </li><li> 21 </li><li> 22 </li><li> 23 </li> |
<li> 24 </li><li> 25 </li><li> 26 </li><li> 27 </li><li> 28 </li><li> 29 </li> |
<li> 30 </li><li> 31 </li><li> 32 </li><li> 33 </li><li> 34 </li><li> 35 </li> |
<li> 36 </li><li> 37 </li><li> 38 </li><li> 39 </li><li> 40 </li><li> 41 </li> |
<li> 42 </li><li> 43 </li><li> 44 </li><li> 45 </li><li> 46 </li><li> 47 </li> |
<li> 48 </li><li> 49 </li><li> 50 </li><li> 51 </li><li> 52 </li><li> 53 </li> |
<li> 54 </li><li> 55 </li><li> 56 </li><li> 57 </li><li> 58 </li><li> 59 </li> |
<li> 00 </li><li> 01 </li><li> 02 </li><li> 03 </li><li> 04 </li><li> 05 </li> |
<li> 06 </li><li> 07 </li><li> 08 </li><li> 09 </li><li> 10 </li><li> 11 </li> |
<li> 12 </li><li> 13 </li><li> 14 </li><li> 15 </li><li> 16 </li><li> 17 </li> |
<li> 18 </li><li> 19 </li> |
</ul> |
</div> |
<ul class= "digits" > |
<li> 1 </li><li> 2 </li><li> 3 </li><li> 4 </li><li> 5 </li><li> 6 </li> |
<li> 7 </li><li> 8 </li><li> 9 </li><li> 10 </li><li> 11 </li><li> 12 </li> |
</ul> |
<div class= "hours-hand" ></div> |
<div class= "minutes-hand" ></div> |
<div class= "seconds-hand" ></div> |
</div> |
body { font-size : 62.5% ; margin : 1em ; background : #232425 } |
ul { list-style : none ; margin : 0 ; padding : 0 } |
#watch { font-size : 1em ; position : relative } |
#watch .frame-face { |
position : relative ; |
width : 30em ; |
height : 30em ; |
margin : 2em auto ; |
border-radius: 15em ; |
background :-webkit-linear-gradient( top , #f9f9f9 , #666 ); |
background :-moz-linear-gradient( top , #f9f9f9 , #666 ); |
background :linear-gradient(to bottom , #f9f9f9 , #666 ); |
box-shadow:rgba( 0 , 0 , 0 ,. 8 ) . 5em . 5em 4em ; |
} |
#watch .frame-face:before { |
content : '' ; |
width : 29.4em ; |
height : 29.4em ; |
border-radius: 14.7em ; |
position : absolute ; |
top :. 3em ; left :. 3em ; |
background : |
-webkit-linear-gradient( 135 deg, rgba( 246 , 248 , 249 , 0 ) 0% ,rgba( 229 , 235 , 238 , 1 ) 50% ,rgba( 205 , 212 , 217 , 1 ) 51% ,rgba( 245 , 247 , 249 , 0 ) 100% ), |
-webkit-radial-gradient( center , ellipse cover, rgba( 246 , 248 , 249 , 1 ) 0% ,rgba( 229 , 235 , 238 , 1 ) 65% ,rgba( 205 , 212 , 217 , 1 ) 66% ,rgba( 245 , 247 , 249 , 1 ) 100% ); |
background : |
-moz-linear-gradient( 135 deg, rgba( 246 , 248 , 249 , 0 ) 0% ,rgba( 229 , 235 , 238 , 1 ) 50% ,rgba( 205 , 212 , 217 , 1 ) 51% ,rgba( 245 , 247 , 249 , 0 ) 100% ), |
-moz-radial-gradient( center , ellipse cover, rgba( 246 , 248 , 249 , 1 ) 0% ,rgba( 229 , 235 , 238 , 1 ) 65% ,rgba( 205 , 212 , 217 , 1 ) 66% ,rgba( 245 , 247 , 249 , 1 ) 100% ); |
background : |
linear-gradient( 135 deg, rgba( 246 , 248 , 249 , 0 ) 0% ,rgba( 229 , 235 , 238 , 1 ) 50% ,rgba( 205 , 212 , 217 , 1 ) 51% ,rgba( 245 , 247 , 249 , 0 ) 100% ), |
radial-gradient(ellipse at center , rgba( 246 , 248 , 249 , 1 ) 0% ,rgba( 229 , 235 , 238 , 1 ) 65% ,rgba( 205 , 212 , 217 , 1 ) 66% ,rgba( 245 , 247 , 249 , 1 ) 100% ); |
} |
#watch .frame-face:after { |
content : '' ; |
width : 28em ; |
height : 28em ; |
border-radius: 14.2em ; |
position : absolute ; |
top :. 9em ; left :. 9em ; |
box-shadow: inset rgba( 0 , 0 , 0 ,. 2 ) . 2em . 2em 1em ; |
border :. 1em solid rgba( 0 , 0 , 0 ,. 2 ); |
background :-webkit-linear-gradient( top , #fff , #ccc ); |
background :-moz-linear-gradient( top , #fff , #ccc ); |
background :linear-gradient(to bottom , #fff , #ccc ); |
} |
#watch .minute-marks li { |
display : block ; |
width :. 2em ; |
height :. 6em ; |
background : #929394 ; |
position : absolute ; |
top : 50% ; left : 50% ; |
margin :-. 4em 0 0 -. 1em ; |
} |
#watch .minute-marks li:first-child {transform:rotate( 6 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 2 ) {transform:rotate( 12 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 3 ) {transform:rotate( 18 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 4 ) {transform:rotate( 24 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 5 ) {transform:rotate( 36 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 6 ) {transform:rotate( 42 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 7 ) {transform:rotate( 48 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 8 ) {transform:rotate( 54 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 9 ) {transform:rotate( 66 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 10 ) {transform:rotate( 72 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 11 ) {transform:rotate( 78 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 12 ) {transform:rotate( 84 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 13 ) {transform:rotate( 96 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 14 ) {transform:rotate( 102 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 15 ) {transform:rotate( 108 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 16 ) {transform:rotate( 114 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 17 ) {transform:rotate( 126 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 18 ) {transform:rotate( 132 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 19 ) {transform:rotate( 138 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 20 ) {transform:rotate( 144 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 21 ) {transform:rotate( 156 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 22 ) {transform:rotate( 162 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 23 ) {transform:rotate( 168 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 24 ) {transform:rotate( 174 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 25 ) {transform:rotate( 186 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 26 ) {transform:rotate( 192 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 27 ) {transform:rotate( 198 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 28 ) {transform:rotate( 204 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 29 ) {transform:rotate( 216 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 30 ) {transform:rotate( 222 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 31 ) {transform:rotate( 228 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 32 ) {transform:rotate( 234 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 33 ) {transform:rotate( 246 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 34 ) {transform:rotate( 252 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 35 ) {transform:rotate( 258 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 36 ) {transform:rotate( 264 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 37 ) {transform:rotate( 276 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 38 ) {transform:rotate( 282 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 39 ) {transform:rotate( 288 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 40 ) {transform:rotate( 294 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 41 ) {transform:rotate( 306 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 42 ) {transform:rotate( 312 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 43 ) {transform:rotate( 318 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 44 ) {transform:rotate( 324 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 45 ) {transform:rotate( 336 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 46 ) {transform:rotate( 342 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 47 ) {transform:rotate( 348 deg) translateY( -12.7em )} |
#watch .minute-marks li:nth-child( 48 ) {transform:rotate( 354 deg) translateY( -12.7em )} |
#watch . digits { |
width : 30em ; |
height : 30em ; |
border-radius: 15em ; |
position : absolute ; |
top : 0 ; left : 50% ; |
margin-left : -15em ; |
} |
#watch . digits li { |
font-size : 1.6em ; |
display : block ; |
width : 1.6em ; |
height : 1.6em ; |
position : absolute ; |
top : 50% ; left : 50% ; |
line-height : 1.6em ; |
text-align : center ; |
margin :-. 8em 0 0 -. 8em ; |
font-weight : bold ; |
} |
#watch . digits li:nth-child( 1 ) { transform:translate( 3.9em , -6.9em ) } |
#watch . digits li:nth-child( 2 ) { transform:translate( 6.9em , -4em ) } |
#watch . digits li:nth-child( 3 ) { transform:translate( 8em , 0 ) } |
#watch . digits li:nth-child( 4 ) { transform:translate( 6.8em , 4em ) } |
#watch . digits li:nth-child( 5 ) { transform:translate( 3.9em , 6.9em ) } |
#watch . digits li:nth-child( 6 ) { transform:translate( 0 , 8em ) } |
#watch . digits li:nth-child( 7 ) { transform:translate( -3.9em , 6.9em ) } |
#watch . digits li:nth-child( 8 ) { transform:translate( -6.8em , 4em ) } |
#watch . digits li:nth-child( 9 ) { transform:translate( -8em , 0 ) } |
#watch . digits li:nth-child( 10 ) { transform:translate( -6.9em , -4em ) } |
#watch . digits li:nth-child( 11 ) { transform:translate( -3.9em , -6.9em ) } |
#watch . digits li:nth-child( 12 ) { transform:translate( 0 , -8em ) } |
#watch .digits:before { |
content : '' ; |
width : 1.6em ; |
height : 1.6em ; |
border-radius:. 8em ; |
position : absolute ; |
top : 50% ; left : 50% ; |
margin :-. 8em 0 0 -. 8em ; |
background : #121314 ; |
} |
#watch .digits:after { |
content : '' ; |
width : 4em ; |
height : 4em ; |
border-radius: 2.2em ; |
position : absolute ; |
top : 50% ; left : 50% ; |
margin : -2.1em 0 0 -2.1em ; |
border :. 1em solid #c6c6c6 ; |
background :-webkit-radial-gradient( center , ellipse cover, rgba( 200 , 200 , 200 , 0 ), rgba( 190 , 190 , 190 , 1 ) 90% , rgba( 130 , 130 , 130 , 1 ) 100% ); |
background :-moz-radial-gradient( center , ellipse cover, rgba( 200 , 200 , 200 , 0 ), rgba( 190 , 190 , 190 , 1 ) 90% , rgba( 130 , 130 , 130 , 1 ) 100% ); |
background :radial-gradient(ellipse at center , rgba( 200 , 200 , 200 , 0 ), rgba( 190 , 190 , 190 , 1 ) 90% , rgba( 130 , 130 , 130 , 1 ) 100% ); |
} |
@keyframes hours { to {transform:rotate( 335 deg)} } |
#watch .hours-hand { |
width :. 8em ; |
height : 7em ; |
border-radius: 0 0 . 9em . 9em ; |
background : #232425 ; |
position : absolute ; |
bottom : 50% ; left : 50% ; |
margin : 0 0 -. 8em -. 4em ; |
box-shadow: #232425 0 0 2px ; |
transform-origin: 0.4em 6.2em ; |
transform:rotate( -25 deg); |
animation:hours 43200 s linear 0 s infinite; |
} |
#watch .hours-hand:before { |
content : '' ; |
background :inherit; |
width : 1.8em ; |
height :. 8em ; |
border-radius: 0 0 . 8em . 8em ; |
box-shadow: #232425 0 0 1px ; |
position : absolute ; |
top :-. 7em ; left :-. 5em ; |
} |
#watch .hours-hand:after { |
content : '' ; |
width : 0 ; height : 0 ; |
border :. 9em solid #232425 ; |
border-width : 0 . 9em 2.4em . 9em ; |
border-left-color : transparent ; |
border-right-color : transparent ; |
position : absolute ; |
top : -3.1em ; left :-. 5em ; |
} |
@keyframes minutes { to {transform:rotate( 422 deg)} } |
#watch .minutes-hand { |
width :. 8em ; |
height : 12.5em ; |
border-radius:. 5em ; |
background : #343536 ; |
position : absolute ; |
bottom : 50% ; left : 50% ; |
margin : 0 0 -1.5em -. 4em ; |
box-shadow: #343536 0 0 2px ; |
transform-origin: 0.4em 11em ; |
transform:rotate( 62 deg); |
animation:minutes 3600 s linear 0 s infinite; |
} |
@keyframes seconds { to {transform:rotate( 480 deg)} } |
#watch .seconds-hand { |
width :. 2em ; |
height : 14em ; |
border-radius:. 1em . 1em 0 0 / 10em 10em 0 0 ; |
background : #c00 ; |
position : absolute ; |
bottom : 50% ; left : 50% ; |
margin : 0 0 -2em -. 1em ; |
box-shadow:rgba( 0 , 0 , 0 ,. 8 ) 0 0 . 2em ; |
transform-origin: 0.1em 12em ; |
transform:rotate( 120 deg); |
animation:seconds 60 s steps( 60 , end) 0 s infinite; |
} |
#watch .seconds-hand:after { |
content : '' ; |
width : 1.4em ; |
height : 1.4em ; |
border-radius:. 7em ; |
background :inherit; |
position : absolute ; |
left :-. 65em ; bottom : 1.35em ; |
} |
#watch .seconds-hand:before { |
content : '' ; |
width :. 8em ; |
height : 3em ; |
border-radius:. 2em . 2em . 4em . 4em /. 2em . 2em 2em 2em ; |
box-shadow:rgba( 0 , 0 , 0 ,. 8 ) 0 0 . 2em ; |
background :inherit; |
position : absolute ; |
left :-. 35em ; bottom : -3em ; |
} |
#watch .digital-wrap { |
width : 9em ; |
height : 3em ; |
border :. 1em solid #222 ; |
border-radius:. 2em ; |
position : absolute ; |
top : 50% ; left : 50% ; |
margin : 3em 0 0 -4.5em ; |
overflow : hidden ; |
background : #4c4c4c ; |
background :-webkit-linear-gradient( top , #4c4c4c 0% , #0f0f0f 100% ); |
background :-moz-linear-gradient( top , #4c4c4c 0% , #0f0f0f 100% ); |
background :-ms-linear-gradient( top , #4c4c4c 0% , #0f0f0f 100% ); |
background :-o-linear-gradient( top , #4c4c4c 0% , #0f0f0f 100% ); |
background :linear-gradient(to bottom , #4c4c4c 0% , #0f0f0f 100% ); |
} |
#watch .digital-wrap ul { |
float : left ; |
width : 2.85em ; |
height : 3em ; |
border-right :. 1em solid #000 ; |
color : #ddd ; |
font-family :Consolas, monaco, monospace ; |
} |
#watch .digital-wrap ul:last-child { border : none } |
#watch .digital-wrap li { |
font-size : 1.5em ; |
line-height : 2 ; |
letter-spacing : 2px ; |
text-align : center ; |
position : relative ; |
left : 1px ; |
} |
#watch .digit-minutes li { |
animation:dsm 3600 s steps( 60 , end) 0 s infinite; |
} |
#watch .digit-seconds li { |
animation:dsm 60 s steps( 60 , end) 0 s infinite; |
} |
@keyframes dsm { |
to { transform:translateY( -120em ) } |
} |
by: 发表于:2017-11-30 10:53:39 顶(0) | 踩(0) 回复
??
回复评论