仪表板动效元素：多款时钟
在仪表板设计时，经常需要添加一些动效来提升视觉冲击力，这个帖子主要介绍多款时钟。实现步骤：
1、在仪表板中添加外部扩展
2、将以下代码粘贴到外部扩展的Html视图中，点击确定
<html>
<head>
<style>
.clock-wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.clock-border {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 460px;
height: 460px;
border-width: 18px;
border-color: transparent #d2d8df #d2d8df;
border-style: solid;
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
-moz-animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
-o-animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
animation: rotate-clock-border 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
-webkit-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
-moz-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
-o-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
}
.clock {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 400px;
height: 400px;
padding: 0;
background-color: #262c33;
border: 18px solid #373f4a;
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
-webkit-background-clip: border-box;
-moz-background-clip: border-box;
background-clip: border-box;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
-moz-animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
-o-animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
animation: counterrotate-clock 0.69s cubic-bezier(0.645, 0, 0.605, 1) 0.69s 1 forwards;
-webkit-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
-moz-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
-o-animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
animation-timing-function: cubic-bezier(0.645, -0.18, 0.605, 1.36);
}
lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes rotate-clock-border{ 0%{ -webkit-transform: rotate( 45deg); } 100%{ -webkit-transform: rotate( 315deg); }}
@-moz-keyframes rotate-clock-border{ 0%{ -moz-transform: rotate( 45deg); } 100%{ -moz-transform: rotate( 315deg); }}
@-o-keyframes rotate-clock-border{ 0%{ -o-transform: rotate( 45deg); } 100%{ -o-transform: rotate( 315deg); }}
@keyframes rotate-clock-border{ 0%{-webkit-transform: rotate( 45deg);-moz-transform: rotate( 45deg);-ms-transform: rotate( 45deg);transform: rotate( 45deg); } 100%{-webkit-transform: rotate( 315deg);-moz-transform: rotate( 315deg);-ms-transform: rotate( 315deg);transform: rotate( 315deg); }}
{
zoom: 1;
}
lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes counterrotate-clock{ 0%{ -webkit-transform: rotate(-45deg); } 100%{ -webkit-transform: rotate(-315deg); }}
@-moz-keyframes counterrotate-clock{ 0%{ -moz-transform: rotate(-45deg); } 100%{ -moz-transform: rotate(-315deg); }}
@-o-keyframes counterrotate-clock{ 0%{ -o-transform: rotate(-45deg); } 100%{ -o-transform: rotate(-315deg); }}
@keyframes counterrotate-clock{ 0%{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg); } 100%{-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);-ms-transform: rotate(-315deg);transform: rotate(-315deg); }}
{
zoom: 1;
}
.hour {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transform: rotate(84deg);
-moz-transform: rotate(84deg);
-ms-transform: rotate(84deg);
-o-transform: rotate(84deg);
transform: rotate(84deg);
}
.hour .hand {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-animation: tick 43200s normal infinite steps(3600, end) 3s;
-moz-animation: tick 43200s normal infinite steps(3600, end) 3s;
-o-animation: tick 43200s normal infinite steps(3600, end) 3s;
animation: tick 43200s normal infinite steps(3600, end) 3s;
}
.hour .hand:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: inline-block;
top: 0;
width: 16px;
height: 120px;
height: 0;
-webkit-border-top-left-radius: 2px;
-moz-border-radius-topleft: 2px;
border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-background-clip: padding-box;
-moz-border-radius-topright: 2px;
-moz-background-clip: padding;
border-top-right-radius: 2px;
background-clip: padding-box;
-webkit-transform-origin: center 100%;
-moz-transform-origin: center 100%;
-ms-transform-origin: center 100%;
-o-transform-origin: center 100%;
transform-origin: center 100%;
background-color: #fff;
}
.hour .hand:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
top: 0;
display: inline-block;
border-bottom: 16px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
width: 0px;
height: 0px;
-webkit-transform-origin: center 100%;
-moz-transform-origin: center 100%;
-ms-transform-origin: center 100%;
-o-transform-origin: center 100%;
transform-origin: center 100%;
}
.hour .hand:before {
-webkit-animation: hour-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
-moz-animation: hour-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
-o-animation: hour-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
animation: hour-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
-webkit-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
-moz-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
-o-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
}
.hour .hand:before lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 120px; top: -120px; }}
@-moz-keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 120px; top: -120px; }}
@-o-keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 120px; top: -120px; }}
@keyframes hour-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 120px; top: -120px; }}
{
zoom: 1;
}
.hour .hand:after {
-webkit-animation: hour-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
-moz-animation: hour-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
-o-animation: hour-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
animation: hour-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.35s 1 forwards;
-webkit-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
-moz-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
-o-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
}
.hour .hand:after lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes hour-grow-after{ 0%{ top: 0; } 100%{ top: -254px; }}
@-moz-keyframes hour-grow-after{ 0%{ top: 0; } 100%{ top: -254px; }}
@-o-keyframes hour-grow-after{ 0%{ top: 0; } 100%{ top: -254px; }}
@keyframes hour-grow-after{ 0%{ top: 0; } 100%{ top: -254px; }}
{
zoom: 1;
}
.minute {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transform: rotate(288deg);
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-o-transform: rotate(288deg);
transform: rotate(288deg);
}
.minute .hand {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-animation: tick 3600s normal infinite steps(3600, end) 3s;
-moz-animation: tick 3600s normal infinite steps(3600, end) 3s;
-o-animation: tick 3600s normal infinite steps(3600, end) 3s;
animation: tick 3600s normal infinite steps(3600, end) 3s;
}
.minute .hand:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: inline-block;
top: 0;
width: 12px;
height: 168px;
height: 0;
-webkit-border-top-left-radius: 2px;
-moz-border-radius-topleft: 2px;
border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-background-clip: padding-box;
-moz-border-radius-topright: 2px;
-moz-background-clip: padding;
border-top-right-radius: 2px;
background-clip: padding-box;
-webkit-transform-origin: center 100%;
-moz-transform-origin: center 100%;
-ms-transform-origin: center 100%;
-o-transform-origin: center 100%;
transform-origin: center 100%;
background-color: #fff;
}
.minute .hand:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
top: 0;
display: inline-block;
border-bottom: 12px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
width: 0px;
height: 0px;
-webkit-transform-origin: center 100%;
-moz-transform-origin: center 100%;
-ms-transform-origin: center 100%;
-o-transform-origin: center 100%;
transform-origin: center 100%;
}
.minute .hand:before {
-webkit-animation: minute-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
-moz-animation: minute-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
-o-animation: minute-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
animation: minute-grow-before 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
-webkit-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
-moz-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
-o-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
}
.minute .hand:before lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 168px; top: -168px; }}
@-moz-keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 168px; top: -168px; }}
@-o-keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 168px; top: -168px; }}
@keyframes minute-grow-before{ 0%{ height: 0; top: 0; } 100%{ height: 168px; top: -168px; }}
{
zoom: 1;
}
.minute .hand:after {
-webkit-animation: minute-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
-moz-animation: minute-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
-o-animation: minute-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
animation: minute-grow-after 0.4s cubic-bezier(0.69, 0, 0.49, 1) 1.6s 1 forwards;
-webkit-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
-moz-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
-o-animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
animation-timing-function: cubic-bezier(0.69, -0.06, 0.49, 1.4);
}
.minute .hand:after lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes minute-grow-after{ 0%{ top: 0; } 100%{ top: -346px; }}
@-moz-keyframes minute-grow-after{ 0%{ top: 0; } 100%{ top: -346px; }}
@-o-keyframes minute-grow-after{ 0%{ top: 0; } 100%{ top: -346px; }}
@keyframes minute-grow-after{ 0%{ top: 0; } 100%{ top: -346px; }}
{
zoom: 1;
}
.second {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.second .hand {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-animation: tick-second 1s normal infinite steps(30, end) 3s;
-moz-animation: tick-second 1s normal infinite steps(30, end) 3s;
-o-animation: tick-second 1s normal infinite steps(30, end) 3s;
animation: tick-second 1s normal infinite steps(30, end) 3s;
}
.second .hand:before {
content: '';
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
top: 0;
width: 8px;
height: 0px;
background-color: #f16b41;
-webkit-border-radius: 8px;
-webkit-background-clip: padding-box;
-moz-border-radius: 8px;
-moz-background-clip: padding;
border-radius: 8px;
background-clip: padding-box;
-webkit-transform-origin: center 180px;
-moz-transform-origin: center 180px;
-ms-transform-origin: center 180px;
-o-transform-origin: center 180px;
transform-origin: center 180px;
-webkit-animation: second-grow 1.6s cubic-bezier(1, 0, 0, 1) 1.45s 1 forwards, second 60s normal infinite steps(60, end) 3s;
-moz-animation: second-grow 1.6s cubic-bezier(1, 0, 0, 1) 1.45s 1 forwards, second 60s normal infinite steps(60, end) 3s;
-o-animation: second-grow 1.6s cubic-bezier(1, 0, 0, 1) 1.45s 1 forwards, second 60s normal infinite steps(60, end) 3s;
animation: second-grow 1.6s cubic-bezier(1, 0, 0, 1) 1.45s 1 forwards, second 60s normal infinite steps(60, end) 3s;
}
.second .hand:before lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes second-grow{ from { top: 0; height: 0; } 100%{ top: -120px; height: 240px; }}
@-moz-keyframes second-grow{ from { top: 0; height: 0; } 100%{ top: -120px; height: 240px; }}
@-o-keyframes second-grow{ from { top: 0; height: 0; } 100%{ top: -120px; height: 240px; }}
@keyframes second-grow{ from { top: 0; height: 0; } 100%{ top: -120px; height: 240px; }}
{
zoom: 1;
}
.second .hand:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: inline-block;
width: 32px;
height: 32px;
-webkit-border-radius: 32px;
-webkit-background-clip: padding-box;
-moz-border-radius: 32px;
-moz-background-clip: padding;
border-radius: 32px;
background-clip: padding-box;
background-color: #f16b41;
}
lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes tick{ 0%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); }}
@-moz-keyframes tick{ 0%{ -moz-transform: rotate(0deg); } 100%{ -moz-transform: rotate(360deg); }}
@-o-keyframes tick{ 0%{ -o-transform: rotate(0deg); } 100%{ -o-transform: rotate(360deg); }}
@keyframes tick{ 0%{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg); } 100%{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg); }}
{
zoom: 1;
}
lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes second{ 0%{ -webkit-transform: rotate(0deg) } 100%{ -webkit-transform: rotate(360deg) }}
@-moz-keyframes second{ 0%{ -moz-transform: rotate(0deg) } 100%{ -moz-transform: rotate(360deg) }}
@-o-keyframes second{ 0%{ -o-transform: rotate(0deg) } 100%{ -o-transform: rotate(360deg) }}
@keyframes second{ 0%{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
{
zoom: 1;
}
lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes tick-second{ 0%{ -webkit-transform: rotate(0deg); } 21%{ -webkit-transform: rotate(4deg); } 26%{ -webkit-transform: rotate(8deg); } 33%{ -webkit-transform: rotate(4deg); } 37%{ -webkit-transform: rotate(6deg); } 100%{ -webkit-transform: rotate(6deg); }}
@-moz-keyframes tick-second{ 0%{ -moz-transform: rotate(0deg); } 21%{ -moz-transform: rotate(4deg); } 26%{ -moz-transform: rotate(8deg); } 33%{ -moz-transform: rotate(4deg); } 37%{ -moz-transform: rotate(6deg); } 100%{ -moz-transform: rotate(6deg); }}
@-o-keyframes tick-second{ 0%{ -o-transform: rotate(0deg); } 21%{ -o-transform: rotate(4deg); } 26%{ -o-transform: rotate(8deg); } 33%{ -o-transform: rotate(4deg); } 37%{ -o-transform: rotate(6deg); } 100%{ -o-transform: rotate(6deg); }}
@keyframes tick-second{ 0%{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg); } 21%{-webkit-transform: rotate(4deg);-moz-transform: rotate(4deg);-ms-transform: rotate(4deg);transform: rotate(4deg); } 26%{-webkit-transform: rotate(8deg);-moz-transform: rotate(8deg);-ms-transform: rotate(8deg);transform: rotate(8deg); } 33%{-webkit-transform: rotate(4deg);-moz-transform: rotate(4deg);-ms-transform: rotate(4deg);transform: rotate(4deg); } 37%{-webkit-transform: rotate(6deg);-moz-transform: rotate(6deg);-ms-transform: rotate(6deg);transform: rotate(6deg); } 100%{-webkit-transform: rotate(6deg);-moz-transform: rotate(6deg);-ms-transform: rotate(6deg);transform: rotate(6deg); }}
{
zoom: 1;
}
.minute-marks {
display: inline-block;
padding: 0;
margin: 0;
list-style-type: none;
width: 0px;
height: 0px;
}
.minute-marks li {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: inline-block;
width: 200px;
height: 200px;
}
.minute-marks li:before,
.minute-marks li:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0px;
height: 0px;
display: inline-block;
border-color: #d4d5d6;
border-width: 4px;
border-style: solid;
-webkit-border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 4px;
-moz-background-clip: padding;
border-radius: 4px;
background-clip: padding-box;
zoom: 1;
filter: alpha(opacity=0);
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-animation: fade-in 0.1s ease 0s 1 forwards;
-moz-animation: fade-in 0.1s ease 0s 1 forwards;
-o-animation: fade-in 0.1s ease 0s 1 forwards;
animation: fade-in 0.1s ease 0s 1 forwards;
}
.minute-marks li:before lesshat-selector,
.minute-marks li:after lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes fade-in{ from{ -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; } to{ -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; opacity: 1; }}
@-moz-keyframes fade-in{ from{ -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; } to{ -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; opacity: 1; }}
@-o-keyframes fade-in{ from{ -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; } to{ -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; opacity: 1; }}
@keyframes fade-in{ from{ -webkit-opacity: 0; -moz-opacity: 0; -o-opacity: 0; opacity: 0; } to{ -webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; opacity: 1; }}
{
zoom: 1;
}
.minute-marks li:before {
top: -380px;
}
.minute-marks li:after {
bottom: -380px;
}
.minute-marks li.five:before,
.minute-marks li.five:after {
width: 0px;
height: 20px;
}
.minute-marks li.five:before {
top: -360px;
}
.minute-marks li.five:after {
bottom: -360px;
}
.minute-marks li:nth-child(1) {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.minute-marks li:nth-child(1):before {
-webkit-animation-delay: 0.017s;
-moz-animation-delay: 0.017s;
-o-animation-delay: 0.017s;
animation-delay: 0.017s;
}
.minute-marks li:nth-child(1):after {
-webkit-animation-delay: 0.544s;
-moz-animation-delay: 0.544s;
-o-animation-delay: 0.544s;
animation-delay: 0.544s;
}
.minute-marks li:nth-child(2) {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.minute-marks li:nth-child(2):before {
-webkit-animation-delay: 0.034s;
-moz-animation-delay: 0.034s;
-o-animation-delay: 0.034s;
animation-delay: 0.034s;
}
.minute-marks li:nth-child(2):after {
-webkit-animation-delay: 0.561s;
-moz-animation-delay: 0.561s;
-o-animation-delay: 0.561s;
animation-delay: 0.561s;
}
.minute-marks li:nth-child(3) {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
.minute-marks li:nth-child(3):before {
-webkit-animation-delay: 0.051000000000000004s;
-moz-animation-delay: 0.051000000000000004s;
-o-animation-delay: 0.051000000000000004s;
animation-delay: 0.051000000000000004s;
}
.minute-marks li:nth-child(3):after {
-webkit-animation-delay: 0.5780000000000001s;
-moz-animation-delay: 0.5780000000000001s;
-o-animation-delay: 0.5780000000000001s;
animation-delay: 0.5780000000000001s;
}
.minute-marks li:nth-child(4) {
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
.minute-marks li:nth-child(4):before {
-webkit-animation-delay: 0.068s;
-moz-animation-delay: 0.068s;
-o-animation-delay: 0.068s;
animation-delay: 0.068s;
}
.minute-marks li:nth-child(4):after {
-webkit-animation-delay: 0.595s;
-moz-animation-delay: 0.595s;
-o-animation-delay: 0.595s;
animation-delay: 0.595s;
}
.minute-marks li:nth-child(5) {
-webkit-transform: rotate(24deg);
-moz-transform: rotate(24deg);
-ms-transform: rotate(24deg);
-o-transform: rotate(24deg);
transform: rotate(24deg);
}
.minute-marks li:nth-child(5):before {
-webkit-animation-delay: 0.085s;
-moz-animation-delay: 0.085s;
-o-animation-delay: 0.085s;
animation-delay: 0.085s;
}
.minute-marks li:nth-child(5):after {
-webkit-animation-delay: 0.612s;
-moz-animation-delay: 0.612s;
-o-animation-delay: 0.612s;
animation-delay: 0.612s;
}
.minute-marks li:nth-child(6) {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.minute-marks li:nth-child(6):before {
-webkit-animation-delay: 0.10200000000000001s;
-moz-animation-delay: 0.10200000000000001s;
-o-animation-delay: 0.10200000000000001s;
animation-delay: 0.10200000000000001s;
}
.minute-marks li:nth-child(6):after {
-webkit-animation-delay: 0.629s;
-moz-animation-delay: 0.629s;
-o-animation-delay: 0.629s;
animation-delay: 0.629s;
}
.minute-marks li:nth-child(7) {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
}
.minute-marks li:nth-child(7):before {
-webkit-animation-delay: 0.11900000000000001s;
-moz-animation-delay: 0.11900000000000001s;
-o-animation-delay: 0.11900000000000001s;
animation-delay: 0.11900000000000001s;
}
.minute-marks li:nth-child(7):after {
-webkit-animation-delay: 0.646s;
-moz-animation-delay: 0.646s;
-o-animation-delay: 0.646s;
animation-delay: 0.646s;
}
.minute-marks li:nth-child(8) {
-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);
-ms-transform: rotate(42deg);
-o-transform: rotate(42deg);
transform: rotate(42deg);
}
.minute-marks li:nth-child(8):before {
-webkit-animation-delay: 0.136s;
-moz-animation-delay: 0.136s;
-o-animation-delay: 0.136s;
animation-delay: 0.136s;
}
.minute-marks li:nth-child(8):after {
-webkit-animation-delay: 0.663s;
-moz-animation-delay: 0.663s;
-o-animation-delay: 0.663s;
animation-delay: 0.663s;
}
.minute-marks li:nth-child(9) {
-webkit-transform: rotate(48deg);
-moz-transform: rotate(48deg);
-ms-transform: rotate(48deg);
-o-transform: rotate(48deg);
transform: rotate(48deg);
}
.minute-marks li:nth-child(9):before {
-webkit-animation-delay: 0.15300000000000002s;
-moz-animation-delay: 0.15300000000000002s;
-o-animation-delay: 0.15300000000000002s;
animation-delay: 0.15300000000000002s;
}
.minute-marks li:nth-child(9):after {
-webkit-animation-delay: 0.68s;
-moz-animation-delay: 0.68s;
-o-animation-delay: 0.68s;
animation-delay: 0.68s;
}
.minute-marks li:nth-child(10) {
-webkit-transform: rotate(54deg);
-moz-transform: rotate(54deg);
-ms-transform: rotate(54deg);
-o-transform: rotate(54deg);
transform: rotate(54deg);
}
.minute-marks li:nth-child(10):before {
-webkit-animation-delay: 0.17s;
-moz-animation-delay: 0.17s;
-o-animation-delay: 0.17s;
animation-delay: 0.17s;
}
.minute-marks li:nth-child(10):after {
-webkit-animation-delay: 0.6970000000000001s;
-moz-animation-delay: 0.6970000000000001s;
-o-animation-delay: 0.6970000000000001s;
animation-delay: 0.6970000000000001s;
}
.minute-marks li:nth-child(11) {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.minute-marks li:nth-child(11):before {
-webkit-animation-delay: 0.187s;
-moz-animation-delay: 0.187s;
-o-animation-delay: 0.187s;
animation-delay: 0.187s;
}
.minute-marks li:nth-child(11):after {
-webkit-animation-delay: 0.714s;
-moz-animation-delay: 0.714s;
-o-animation-delay: 0.714s;
animation-delay: 0.714s;
}
.minute-marks li:nth-child(12) {
-webkit-transform: rotate(66deg);
-moz-transform: rotate(66deg);
-ms-transform: rotate(66deg);
-o-transform: rotate(66deg);
transform: rotate(66deg);
}
.minute-marks li:nth-child(12):before {
-webkit-animation-delay: 0.20400000000000001s;
-moz-animation-delay: 0.20400000000000001s;
-o-animation-delay: 0.20400000000000001s;
animation-delay: 0.20400000000000001s;
}
.minute-marks li:nth-child(12):after {
-webkit-animation-delay: 0.7310000000000001s;
-moz-animation-delay: 0.7310000000000001s;
-o-animation-delay: 0.7310000000000001s;
animation-delay: 0.7310000000000001s;
}
.minute-marks li:nth-child(13) {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
.minute-marks li:nth-child(13):before {
-webkit-animation-delay: 0.22100000000000003s;
-moz-animation-delay: 0.22100000000000003s;
-o-animation-delay: 0.22100000000000003s;
animation-delay: 0.22100000000000003s;
}
.minute-marks li:nth-child(13):after {
-webkit-animation-delay: 0.748s;
-moz-animation-delay: 0.748s;
-o-animation-delay: 0.748s;
animation-delay: 0.748s;
}
.minute-marks li:nth-child(14) {
-webkit-transform: rotate(78deg);
-moz-transform: rotate(78deg);
-ms-transform: rotate(78deg);
-o-transform: rotate(78deg);
transform: rotate(78deg);
}
.minute-marks li:nth-child(14):before {
-webkit-animation-delay: 0.23800000000000002s;
-moz-animation-delay: 0.23800000000000002s;
-o-animation-delay: 0.23800000000000002s;
animation-delay: 0.23800000000000002s;
}
.minute-marks li:nth-child(14):after {
-webkit-animation-delay: 0.765s;
-moz-animation-delay: 0.765s;
-o-animation-delay: 0.765s;
animation-delay: 0.765s;
}
.minute-marks li:nth-child(15) {
-webkit-transform: rotate(84deg);
-moz-transform: rotate(84deg);
-ms-transform: rotate(84deg);
-o-transform: rotate(84deg);
transform: rotate(84deg);
}
.minute-marks li:nth-child(15):before {
-webkit-animation-delay: 0.255s;
-moz-animation-delay: 0.255s;
-o-animation-delay: 0.255s;
animation-delay: 0.255s;
}
.minute-marks li:nth-child(15):after {
-webkit-animation-delay: 0.782s;
-moz-animation-delay: 0.782s;
-o-animation-delay: 0.782s;
animation-delay: 0.782s;
}
.minute-marks li:nth-child(16) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.minute-marks li:nth-child(16):before {
-webkit-animation-delay: 0.272s;
-moz-animation-delay: 0.272s;
-o-animation-delay: 0.272s;
animation-delay: 0.272s;
}
.minute-marks li:nth-child(16):after {
-webkit-animation-delay: 0.799s;
-moz-animation-delay: 0.799s;
-o-animation-delay: 0.799s;
animation-delay: 0.799s;
}
.minute-marks li:nth-child(17) {
-webkit-transform: rotate(96deg);
-moz-transform: rotate(96deg);
-ms-transform: rotate(96deg);
-o-transform: rotate(96deg);
transform: rotate(96deg);
}
.minute-marks li:nth-child(17):before {
-webkit-animation-delay: 0.28900000000000003s;
-moz-animation-delay: 0.28900000000000003s;
-o-animation-delay: 0.28900000000000003s;
animation-delay: 0.28900000000000003s;
}
.minute-marks li:nth-child(17):after {
-webkit-animation-delay: 0.8160000000000001s;
-moz-animation-delay: 0.8160000000000001s;
-o-animation-delay: 0.8160000000000001s;
animation-delay: 0.8160000000000001s;
}
.minute-marks li:nth-child(18) {
-webkit-transform: rotate(102deg);
-moz-transform: rotate(102deg);
-ms-transform: rotate(102deg);
-o-transform: rotate(102deg);
transform: rotate(102deg);
}
.minute-marks li:nth-child(18):before {
-webkit-animation-delay: 0.30600000000000005s;
-moz-animation-delay: 0.30600000000000005s;
-o-animation-delay: 0.30600000000000005s;
animation-delay: 0.30600000000000005s;
}
.minute-marks li:nth-child(18):after {
-webkit-animation-delay: 0.8330000000000001s;
-moz-animation-delay: 0.8330000000000001s;
-o-animation-delay: 0.8330000000000001s;
animation-delay: 0.8330000000000001s;
}
.minute-marks li:nth-child(19) {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
}
.minute-marks li:nth-child(19):before {
-webkit-animation-delay: 0.323s;
-moz-animation-delay: 0.323s;
-o-animation-delay: 0.323s;
animation-delay: 0.323s;
}
.minute-marks li:nth-child(19):after {
-webkit-animation-delay: 0.8500000000000001s;
-moz-animation-delay: 0.8500000000000001s;
-o-animation-delay: 0.8500000000000001s;
animation-delay: 0.8500000000000001s;
}
.minute-marks li:nth-child(20) {
-webkit-transform: rotate(114deg);
-moz-transform: rotate(114deg);
-ms-transform: rotate(114deg);
-o-transform: rotate(114deg);
transform: rotate(114deg);
}
.minute-marks li:nth-child(20):before {
-webkit-animation-delay: 0.34s;
-moz-animation-delay: 0.34s;
-o-animation-delay: 0.34s;
animation-delay: 0.34s;
}
.minute-marks li:nth-child(20):after {
-webkit-animation-delay: 0.867s;
-moz-animation-delay: 0.867s;
-o-animation-delay: 0.867s;
animation-delay: 0.867s;
}
.minute-marks li:nth-child(21) {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.minute-marks li:nth-child(21):before {
-webkit-animation-delay: 0.35700000000000004s;
-moz-animation-delay: 0.35700000000000004s;
-o-animation-delay: 0.35700000000000004s;
animation-delay: 0.35700000000000004s;
}
.minute-marks li:nth-child(21):after {
-webkit-animation-delay: 0.8840000000000001s;
-moz-animation-delay: 0.8840000000000001s;
-o-animation-delay: 0.8840000000000001s;
animation-delay: 0.8840000000000001s;
}
.minute-marks li:nth-child(22) {
-webkit-transform: rotate(126deg);
-moz-transform: rotate(126deg);
-ms-transform: rotate(126deg);
-o-transform: rotate(126deg);
transform: rotate(126deg);
}
.minute-marks li:nth-child(22):before {
-webkit-animation-delay: 0.374s;
-moz-animation-delay: 0.374s;
-o-animation-delay: 0.374s;
animation-delay: 0.374s;
}
.minute-marks li:nth-child(22):after {
-webkit-animation-delay: 0.901s;
-moz-animation-delay: 0.901s;
-o-animation-delay: 0.901s;
animation-delay: 0.901s;
}
.minute-marks li:nth-child(23) {
-webkit-transform: rotate(132deg);
-moz-transform: rotate(132deg);
-ms-transform: rotate(132deg);
-o-transform: rotate(132deg);
transform: rotate(132deg);
}
.minute-marks li:nth-child(23):before {
-webkit-animation-delay: 0.391s;
-moz-animation-delay: 0.391s;
-o-animation-delay: 0.391s;
animation-delay: 0.391s;
}
.minute-marks li:nth-child(23):after {
-webkit-animation-delay: 0.918s;
-moz-animation-delay: 0.918s;
-o-animation-delay: 0.918s;
animation-delay: 0.918s;
}
.minute-marks li:nth-child(24) {
-webkit-transform: rotate(138deg);
-moz-transform: rotate(138deg);
-ms-transform: rotate(138deg);
-o-transform: rotate(138deg);
transform: rotate(138deg);
}
.minute-marks li:nth-child(24):before {
-webkit-animation-delay: 0.40800000000000003s;
-moz-animation-delay: 0.40800000000000003s;
-o-animation-delay: 0.40800000000000003s;
animation-delay: 0.40800000000000003s;
}
.minute-marks li:nth-child(24):after {
-webkit-animation-delay: 0.935s;
-moz-animation-delay: 0.935s;
-o-animation-delay: 0.935s;
animation-delay: 0.935s;
}
.minute-marks li:nth-child(25) {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-o-transform: rotate(144deg);
transform: rotate(144deg);
}
.minute-marks li:nth-child(25):before {
-webkit-animation-delay: 0.42500000000000004s;
-moz-animation-delay: 0.42500000000000004s;
-o-animation-delay: 0.42500000000000004s;
animation-delay: 0.42500000000000004s;
}
.minute-marks li:nth-child(25):after {
-webkit-animation-delay: 0.9520000000000001s;
-moz-animation-delay: 0.9520000000000001s;
-o-animation-delay: 0.9520000000000001s;
animation-delay: 0.9520000000000001s;
}
.minute-marks li:nth-child(26) {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-ms-transform: rotate(150deg);
-o-transform: rotate(150deg);
transform: rotate(150deg);
}
.minute-marks li:nth-child(26):before {
-webkit-animation-delay: 0.44200000000000006s;
-moz-animation-delay: 0.44200000000000006s;
-o-animation-delay: 0.44200000000000006s;
animation-delay: 0.44200000000000006s;
}
.minute-marks li:nth-child(26):after {
-webkit-animation-delay: 0.9690000000000001s;
-moz-animation-delay: 0.9690000000000001s;
-o-animation-delay: 0.9690000000000001s;
animation-delay: 0.9690000000000001s;
}
.minute-marks li:nth-child(27) {
-webkit-transform: rotate(156deg);
-moz-transform: rotate(156deg);
-ms-transform: rotate(156deg);
-o-transform: rotate(156deg);
transform: rotate(156deg);
}
.minute-marks li:nth-child(27):before {
-webkit-animation-delay: 0.459s;
-moz-animation-delay: 0.459s;
-o-animation-delay: 0.459s;
animation-delay: 0.459s;
}
.minute-marks li:nth-child(27):after {
-webkit-animation-delay: 0.986s;
-moz-animation-delay: 0.986s;
-o-animation-delay: 0.986s;
animation-delay: 0.986s;
}
.minute-marks li:nth-child(28) {
-webkit-transform: rotate(162deg);
-moz-transform: rotate(162deg);
-ms-transform: rotate(162deg);
-o-transform: rotate(162deg);
transform: rotate(162deg);
}
.minute-marks li:nth-child(28):before {
-webkit-animation-delay: 0.47600000000000003s;
-moz-animation-delay: 0.47600000000000003s;
-o-animation-delay: 0.47600000000000003s;
animation-delay: 0.47600000000000003s;
}
.minute-marks li:nth-child(28):after {
-webkit-animation-delay: 1.0030000000000001s;
-moz-animation-delay: 1.0030000000000001s;
-o-animation-delay: 1.0030000000000001s;
animation-delay: 1.0030000000000001s;
}
.minute-marks li:nth-child(29) {
-webkit-transform: rotate(168deg);
-moz-transform: rotate(168deg);
-ms-transform: rotate(168deg);
-o-transform: rotate(168deg);
transform: rotate(168deg);
}
.minute-marks li:nth-child(29):before {
-webkit-animation-delay: 0.49300000000000005s;
-moz-animation-delay: 0.49300000000000005s;
-o-animation-delay: 0.49300000000000005s;
animation-delay: 0.49300000000000005s;
}
.minute-marks li:nth-child(29):after {
-webkit-animation-delay: 1.02s;
-moz-animation-delay: 1.02s;
-o-animation-delay: 1.02s;
animation-delay: 1.02s;
}
.minute-marks li:nth-child(30) {
-webkit-transform: rotate(174deg);
-moz-transform: rotate(174deg);
-ms-transform: rotate(174deg);
-o-transform: rotate(174deg);
transform: rotate(174deg);
}
.minute-marks li:nth-child(30):before {
-webkit-animation-delay: 0.51s;
-moz-animation-delay: 0.51s;
-o-animation-delay: 0.51s;
animation-delay: 0.51s;
}
.minute-marks li:nth-child(30):after {
-webkit-animation-delay: 1.037s;
-moz-animation-delay: 1.037s;
-o-animation-delay: 1.037s;
animation-delay: 1.037s;
}
h1 {
position: absolute;
bottom: 0;
margin-bottom: 44px;
width: 100%;
text-align: center;
font: bold 33px/1 "Trebuchet MS", Verdana, sans-serif;
color: #d2d8df;
text-shadow: 0 -2px 0 #fff;
}
@media (max-height: 740px) {
h1 {
display: none;
}
}
h1 small {
display: block;
margin-top: 10px;
font-weight: normal;
font-size: 12px;
color: #b4beca;
text-shadow: none;
}
h1 small a {
color: #b4beca;
text-decoration: none;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
h1 small a:hover {
color: #708399;
}
</style>
</head>
<body>
<div class='clock-wrapper'>
<div class='clock-border'>
<div class='clock'>
<ul class='minute-marks'>
<li class='five'></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class='five'></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class='five'></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class='five'></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class='five'></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class='five'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class='hour'>
<div class='hand'></div>
</div>
<div class='minute'>
<div class='hand'></div>
</div>
<div class='second'>
<div class='hand'></div>
</div>
</div>
</div>
</h1>
</div>
</body>
</html>
样式2，粘贴以下代码：
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container {
width: 300px;
height: 300px;
margin: 0 auto;
position: fixed;
perspective: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .clock {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: center center;
transform: rotateX(-15deg) rotateY(-20deg) translateZ(-150px);
background: #000;
}
.container .clock:after {
content: "";
position: absolute;
height: 30px;
width: 345px;
background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
top: 365px;
left: -76px;
border-radius: 4px 4px 0 0;
}
.container .clock h1, .container .clock p {
position: absolute;
z-index: 1;
text-align: center;
width: 100%;
color: #ddd;
transform: scaleX(-1) rotate(-180deg);
font-weight: 100;
font-family: Arial;
}
.container .clock h1 {
top: 160px;
font-size: 14px;
}
.container .clock p {
top: 145px;
font-size: 11px;
color: #bbb;
}
.container .clock .shadow {
position: absolute;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
z-index: 10;
transform: rotateX(90deg) translateZ(-150px);
box-shadow: -20px 20px 120px 0 rgba(0, 0, 0, 0.8);
}
.container .clock .glas {
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
border-radius: 50%;
border: 5px solid #000;
box-shadow: 1px 0 4px 0 rgba(255, 255, 255, 0.3), inset 0 0 5px #666, inset -20px -10px 120px 0 rgba(100, 100, 100, 0.4);
}
.container .clock .reflex {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #f6bc0d;
width: 30px;
height: 30px;
z-index: 10;
border-radius: 50%;
box-shadow: inset -3px 0 0 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 0 rgba(0, 0, 0, 0.5), 0 -1px 4px 1px rgba(0, 0, 0, 0.5);
}
.container .clock .t-secs {
position: absolute;
width: 100%;
height: 100%;
animation: tick 60s normal infinite steps(60, end);
z-index: 5;
}
.container .clock .t-mins {
position: absolute;
width: 100%;
height: 100%;
animation: tick 3600s normal infinite steps(3600, end);
z-index: 4;
}
.container .clock .t-hours {
position: absolute;
width: 100%;
height: 100%;
animation: tick 21600s normal infinite steps(3600, end);
z-index: 3;
}
.container .clock .tick-sec {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(120deg);
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 5;
background: #f6bc0d;
}
.container .clock .tick-sec:before, .container .clock .tick-sec:after {
content: "";
position: absolute;
background: #f6bc0d;
width: 5px;
z-index: 3;
transform: translateX(-50%);
left: 50%;
border-radius: 3px;
}
.container .clock .tick-sec:before {
height: 100px;
margin-top: -5px;
top: 100%;
box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 0 rgba(0, 0, 0, 0.8);
}
.container .clock .tick-sec:after {
height: 20px;
width: 20px;
margin-bottom: -5px;
bottom: 100%;
border-radius: 10px 10px 0 0;
box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 0 rgba(0, 0, 0, 0.8);
}
.container .clock .tick-min {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 2;
background: #eee;
}
.container .clock .tick-min:before {
content: "";
position: absolute;
background: #eee;
width: 8px;
z-index: 4;
transform: translateX(-50%);
left: 50%;
border-radius: 4px;
}
.container .clock .tick-min:before {
height: 100px;
margin-top: -5px;
top: 100%;
box-shadow: inset -2px 0 0 0 white, inset 1px 0 0 0 rgba(0, 0, 0, 0.5);
}
.container .clock .tick-hour {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(60deg);
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 2;
background: #fff;
}
.container .clock .tick-hour:before {
content: "";
position: absolute;
background: #eee;
width: 12px;
z-index: 4;
transform: translateX(-50%);
left: 50%;
border-radius: 6px;
box-shadow: inset -4px 0 0 0 white, inset 1px 0 0 0 rgba(0, 0, 0, 0.5);
}
.container .clock .tick-hour:before {
height: 80px;
margin-top: -5px;
top: 100%;
}
.container .clock .alarm {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-165deg);
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 2;
background: #000;
}
.container .clock .alarm:before {
content: "";
position: absolute;
background: #000;
width: 8px;
z-index: 4;
transform: translateX(-50%);
left: 50%;
}
.container .clock .alarm:before {
height: 70px;
margin-top: -5px;
top: 100%;
border: 1px solid rgba(100, 100, 100, 0.5);
box-shadow: inset 0 -10px 0 0 #7dab59;
}
.container .clock ul, .container .clock li {
margin: 0;
padding: 0;
list-style-type: none;
z-index: 1;
}
.container .clock ul {
transform-origin: 50% 50%;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
margin: -10px 0 0 -10px;
border: 1px solid #ccc;
}
.container .clock li {
position: absolute;
width: 20px;
height: 20px;
font-size: 16px;
line-height: 20px;
text-align: right;
}
.container .clock .secs li:after {
content: "";
position: absolute;
right: 0;
top: 0;
background: rgba(255, 255, 255, 0.4);
width: 5px;
height: 2px;
}
.container .clock .secs li:nth-child(1) {
transform: rotate(6deg) translateX(100px);
}
.container .clock .secs li:nth-child(2) {
transform: rotate(12deg) translateX(100px);
}
.container .clock .secs li:nth-child(3) {
transform: rotate(18deg) translateX(100px);
}
.container .clock .secs li:nth-child(4) {
transform: rotate(24deg) translateX(100px);
}
.container .clock .secs li:nth-child(5) {
transform: rotate(30deg) translateX(100px);
}
.container .clock .secs li:nth-child(6) {
transform: rotate(36deg) translateX(100px);
}
.container .clock .secs li:nth-child(7) {
transform: rotate(42deg) translateX(100px);
}
.container .clock .secs li:nth-child(8) {
transform: rotate(48deg) translateX(100px);
}
.container .clock .secs li:nth-child(9) {
transform: rotate(54deg) translateX(100px);
}
.container .clock .secs li:nth-child(10) {
transform: rotate(60deg) translateX(100px);
}
.container .clock .secs li:nth-child(11) {
transform: rotate(66deg) translateX(100px);
}
.container .clock .secs li:nth-child(12) {
transform: rotate(72deg) translateX(100px);
}
.container .clock .secs li:nth-child(13) {
transform: rotate(78deg) translateX(100px);
}
.container .clock .secs li:nth-child(14) {
transform: rotate(84deg) translateX(100px);
}
.container .clock .secs li:nth-child(15) {
transform: rotate(90deg) translateX(100px);
}
.container .clock .secs li:nth-child(16) {
transform: rotate(96deg) translateX(100px);
}
.container .clock .secs li:nth-child(17) {
transform: rotate(102deg) translateX(100px);
}
.container .clock .secs li:nth-child(18) {
transform: rotate(108deg) translateX(100px);
}
.container .clock .secs li:nth-child(19) {
transform: rotate(114deg) translateX(100px);
}
.container .clock .secs li:nth-child(20) {
transform: rotate(120deg) translateX(100px);
}
.container .clock .secs li:nth-child(21) {
transform: rotate(126deg) translateX(100px);
}
.container .clock .secs li:nth-child(22) {
transform: rotate(132deg) translateX(100px);
}
.container .clock .secs li:nth-child(23) {
transform: rotate(138deg) translateX(100px);
}
.container .clock .secs li:nth-child(24) {
transform: rotate(144deg) translateX(100px);
}
.container .clock .secs li:nth-child(25) {
transform: rotate(150deg) translateX(100px);
}
.container .clock .secs li:nth-child(26) {
transform: rotate(156deg) translateX(100px);
}
.container .clock .secs li:nth-child(27) {
transform: rotate(162deg) translateX(100px);
}
.container .clock .secs li:nth-child(28) {
transform: rotate(168deg) translateX(100px);
}
.container .clock .secs li:nth-child(29) {
transform: rotate(174deg) translateX(100px);
}
.container .clock .secs li:nth-child(30) {
transform: rotate(180deg) translateX(100px);
}
.container .clock .secs li:nth-child(31) {
transform: rotate(186deg) translateX(100px);
}
.container .clock .secs li:nth-child(32) {
transform: rotate(192deg) translateX(100px);
}
.container .clock .secs li:nth-child(33) {
transform: rotate(198deg) translateX(100px);
}
.container .clock .secs li:nth-child(34) {
transform: rotate(204deg) translateX(100px);
}
.container .clock .secs li:nth-child(35) {
transform: rotate(210deg) translateX(100px);
}
.container .clock .secs li:nth-child(36) {
transform: rotate(216deg) translateX(100px);
}
.container .clock .secs li:nth-child(37) {
transform: rotate(222deg) translateX(100px);
}
.container .clock .secs li:nth-child(38) {
transform: rotate(228deg) translateX(100px);
}
.container .clock .secs li:nth-child(39) {
transform: rotate(234deg) translateX(100px);
}
.container .clock .secs li:nth-child(40) {
transform: rotate(240deg) translateX(100px);
}
.container .clock .secs li:nth-child(41) {
transform: rotate(246deg) translateX(100px);
}
.container .clock .secs li:nth-child(42) {
transform: rotate(252deg) translateX(100px);
}
.container .clock .secs li:nth-child(43) {
transform: rotate(258deg) translateX(100px);
}
.container .clock .secs li:nth-child(44) {
transform: rotate(264deg) translateX(100px);
}
.container .clock .secs li:nth-child(45) {
transform: rotate(270deg) translateX(100px);
}
.container .clock .secs li:nth-child(46) {
transform: rotate(276deg) translateX(100px);
}
.container .clock .secs li:nth-child(47) {
transform: rotate(282deg) translateX(100px);
}
.container .clock .secs li:nth-child(48) {
transform: rotate(288deg) translateX(100px);
}
.container .clock .secs li:nth-child(49) {
transform: rotate(294deg) translateX(100px);
}
.container .clock .secs li:nth-child(50) {
transform: rotate(300deg) translateX(100px);
}
.container .clock .secs li:nth-child(51) {
transform: rotate(306deg) translateX(100px);
}
.container .clock .secs li:nth-child(52) {
transform: rotate(312deg) translateX(100px);
}
.container .clock .secs li:nth-child(53) {
transform: rotate(318deg) translateX(100px);
}
.container .clock .secs li:nth-child(54) {
transform: rotate(324deg) translateX(100px);
}
.container .clock .secs li:nth-child(55) {
transform: rotate(330deg) translateX(100px);
}
.container .clock .secs li:nth-child(56) {
transform: rotate(336deg) translateX(100px);
}
.container .clock .secs li:nth-child(57) {
transform: rotate(342deg) translateX(100px);
}
.container .clock .secs li:nth-child(58) {
transform: rotate(348deg) translateX(100px);
}
.container .clock .secs li:nth-child(59) {
transform: rotate(354deg) translateX(100px);
}
.container .clock .secs li:nth-child(60) {
transform: rotate(360deg) translateX(100px);
}
.container .clock .mins li:after {
content: "";
position: absolute;
right: 0;
top: 50%;
background: #ddd;
width: 10px;
height: 4px;
}
.container .clock .mins li:nth-child(1) {
transform: rotate(30deg) translateX(100px);
}
.container .clock .mins li:nth-child(2) {
transform: rotate(60deg) translateX(100px);
}
.container .clock .mins li:nth-child(3) {
transform: rotate(90deg) translateX(100px);
}
.container .clock .mins li:nth-child(4) {
transform: rotate(120deg) translateX(100px);
}
.container .clock .mins li:nth-child(5) {
transform: rotate(150deg) translateX(100px);
}
.container .clock .mins li:nth-child(6) {
transform: rotate(180deg) translateX(100px);
}
.container .clock .mins li:nth-child(7) {
transform: rotate(210deg) translateX(100px);
}
.container .clock .mins li:nth-child(8) {
transform: rotate(240deg) translateX(100px);
}
.container .clock .mins li:nth-child(9) {
transform: rotate(270deg) translateX(100px);
}
.container .clock .mins li:nth-child(10) {
transform: rotate(300deg) translateX(100px);
}
.container .clock .mins li:nth-child(11) {
transform: rotate(330deg) translateX(100px);
}
.container .clock .mins li:nth-child(12) {
transform: rotate(360deg) translateX(100px);
}
.container .clock .min {
color: #ccc;
font-family: Helvetica, sans-serif;
font-weight: 100;
}
.container .clock .min span {
font-size: 13px;
display: block;
position: absolute;
width: 100 .container .clock .min span;
height: 100%;
right: 0;
top: 0;
}
.container .clock .min li:nth-child(1) {
transform: rotate(90deg) translateX(80px);
}
.container .clock .min li:nth-child(1) span {
transform: scaleX(-1) rotate(270deg);
}
.container .clock .min li:nth-child(2) {
transform: rotate(120deg) translateX(80px);
}
.container .clock .min li:nth-child(2) span {
transform: scaleX(-1) rotate(300deg);
}
.container .clock .min li:nth-child(3) {
transform: rotate(150deg) translateX(80px);
}
.container .clock .min li:nth-child(3) span {
transform: scaleX(-1) rotate(330deg);
}
.container .clock .min li:nth-child(4) {
transform: rotate(180deg) translateX(80px);
}
.container .clock .min li:nth-child(4) span {
transform: scaleX(-1) rotate(360deg);
}
.container .clock .min li:nth-child(5) {
transform: rotate(210deg) translateX(80px);
}
.container .clock .min li:nth-child(5) span {
transform: scaleX(-1) rotate(390deg);
}
.container .clock .min li:nth-child(6) {
transform: rotate(240deg) translateX(80px);
}
.container .clock .min li:nth-child(6) span {
transform: scaleX(-1) rotate(420deg);
}
.container .clock .min li:nth-child(7) {
transform: rotate(270deg) translateX(80px);
}
.container .clock .min li:nth-child(7) span {
transform: scaleX(-1) rotate(450deg);
}
.container .clock .min li:nth-child(8) {
transform: rotate(300deg) translateX(80px);
}
.container .clock .min li:nth-child(8) span {
transform: scaleX(-1) rotate(480deg);
}
.container .clock .min li:nth-child(9) {
transform: rotate(330deg) translateX(80px);
}
.container .clock .min li:nth-child(9) span {
transform: scaleX(-1) rotate(510deg);
}
.container .clock .min li:nth-child(10) {
transform: rotate(360deg) translateX(80px);
}
.container .clock .min li:nth-child(10) span {
transform: scaleX(-1) rotate(540deg);
}
.container .clock .min li:nth-child(11) {
transform: rotate(390deg) translateX(80px);
}
.container .clock .min li:nth-child(11) span {
transform: scaleX(-1) rotate(570deg);
}
.container .clock .min li:nth-child(12) {
transform: rotate(420deg) translateX(80px);
}
.container .clock .min li:nth-child(12) span {
transform: scaleX(-1) rotate(600deg);
}
.container .clock .side {
position: absolute;
width: 300px;
height: 300px;
background: #ddd;
border-radius: 10px;
}
.container .clock .side:nth-child(1) {
z-index: -1;
transform: rotateX(0deg) translateZ(-150px);
}
.container .clock .side:nth-child(1) .line {
position: absolute;
right: -25%;
top: 100%;
width: 150%;
height: 1px;
background: linear-gradient(rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
}
.container .clock .side:nth-child(2) {
transform: rotateX(180deg) translateZ(-150px);
background: #1b191c;
}
.container .clock .side:nth-child(2) .line {
position: absolute;
left: -25%;
bottom: 100%;
width: 150%;
height: 1px;
background: linear-gradient(rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
}
.container .clock .side:nth-child(3) {
transform: rotateX(-90deg) translateZ(-150px);
background: linear-gradient(#302f2d 0%, #615b5d 100%);
}
.container .clock .side:nth-child(3):after {
content: "";
position: absolute;
right: 0px;
top: 40px;
width: 100%;
height: 25px;
background: #000;
border-bottom: 5px solid rgba(255, 255, 255, 0.5);
}
.container .clock .side:nth-child(4) {
transform: rotateY(90deg) translateZ(-150px);
}
.container .clock .side:nth-child(4) .line {
position: absolute;
left: -40%;
top: 100%;
width: 200%;
height: 1px;
background: linear-gradient(rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
}
.container .clock .side:nth-child(5) {
transform: rotateY(-90deg) translateZ(-150px);
background: linear-gradient(-45deg, #302f2d, #76757b 100%);
}
.container .clock .side:nth-child(5) .line {
position: absolute;
left: -50%;
top: 100%;
width: 200%;
height: 1px;
background: linear-gradient(rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
}
.container .clock .side:nth-child(5):after {
content: "";
position: absolute;
right: 40px;
border-left: 5px solid rgba(255, 255, 255, 0.5);
top: 0;
width: 25px;
height: 100%;
background: #000;
}
.container .clock .side:nth-child(5):before {
content: "";
position: absolute;
left: 0px;
top: 100%;
width: 95%;
height: 30px;
background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
.container .clock .side:nth-child(6) {
transform: rotateX(90deg) translateZ(-150px);
}
.container .button {
position: absolute;
width: 50%;
border: 5px solid #555;
height: 150px;
bottom: 0;
left: 25%;
border-top: 10px solid #000;
}
.container .button:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 60px;
height: 60px;
background: #717747;
}
@keyframes tick {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="clock">
<div class="side">
<div class="line"></div>
</div>
<div class="side">
<div class="line"></div>
<div class="glas">
<h1>clOck</h1>
<p>dailycssimages</p>
<div class="reflex"></div>
<div class="t-hours">
<div class="tick-hour"></div>
</div>
<div class="t-mins">
<div class="tick-min"></div>
</div>
<div class="t-secs">
<div class="tick-sec"></div>
</div>
<div class="alarm"> </div>
</div>
<ul class="secs">
<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>
<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>
<ul class="mins">
<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>
<ul class="min">
<li><span>12</span></li>
<li><span>11</span></li>
<li><span>10</span></li>
<li><span>9</span></li>
<li><span>8</span></li>
<li><span>7</span></li>
<li><span>6</span></li>
<li><span>5</span></li>
<li><span>4</span></li>
<li><span>3</span></li>
<li><span>2</span></li>
<li><span>1</span></li>
</ul>
</div>
<div class="side">
<div class="button"></div>
</div>
<div class="side">
<div class="line"></div>
</div>
<div class="side">
<div class="line"></div>
</div>
<div class="side"></div>
<div class="shadow"></div>
</div>
</div>
</body>
</html> 样式3：
<html>
<head>
<style>
body { font-size:62.5%; margin:1em;
overflow: hidden;
}
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(135deg, 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(135deg, 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(135deg, 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(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) 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(335deg)} }
#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(-25deg);
animation:hours 43200s linear 0s 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(422deg)} }
#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(62deg);
animation:minutes 3600s linear 0s infinite;
}
@keyframes seconds { to {transform:rotate(480deg)} }
#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(120deg);
animation:seconds 60s steps(60, end) 0s 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 3600s steps(60, end) 0s infinite;
}
#watch .digit-seconds li {
animation:dsm 60s steps(60, end) 0s infinite;
}
@keyframes dsm {
to { transform:translateY(-120em) }
}
</style>
</head>
<body>
<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>
</html>
页:
[1]