html用css实现镂空时钟,用CSS3实现简易时钟效果——w3cdream|前端学习-开发

本实例纯css3打造，因为没有获取当前时间，所以初始化时间为12点，打开即开始走动。圆盘使用border-radius做成，然后一个:before生成中间的圆点，一个:after生成倒影。至于三个指针就是关键了，其高度及宽度不等，绝对定位于中间的同一圆点，然后以这点为坐标旋转，旋转使用动画一样，只是旋转一周的持续时间不一样，秒针为60s，分针为3600s，时钟为43200s。

css主要代码：

#clock

{ position: relative;

width: 120px; height: 120px;

background: #96d2d0;

margin: 50px auto 0;

border: 10px solid #fff;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

}

#clock:after

{ content: '';

position: absolute;

bottom: -7px;

width: 120px;

left: 0; height: 0px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.8);

-moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);

box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.8);

z-index: -1; }

#clock:before {

content: '';

position: absolute;

z-index: 2;

width: 8px;

height: 8px;

background: #333;

left: 50%;

top: 50%;

margin: -4px 0 0 -4px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%; }

/* Hands */

#clock span.hand {

background: #555;

position: absolute;

left: 50%;

-webkit-animation: rotate 60s infinite linear;

-webkit-transform-origin: left bottom;

-moz-animation: rotate 60s infinite linear;

-moz-transform-origin: left bottom;

-ms-animation: rotate 60s infinite linear;

-ms-transform-origin: left bottom;

-o-animation: rotate 60s infinite linear;

-o-transform-origin: left bottom;

animation: rotate 60s infinite linear;

transform-origin: left bottom;

}

#clock span.hand.second

{ height: 50px; width: 2px;

margin-left: -1px; top: 10px;

}

#clock span.hand.minute

{ height: 40px;

width: 4px;

margin-left: -2px; top: 20px;

-webkit-animation-duration: 3600s;

-moz-animation-duration: 3600s;

-ms-animation-duration: 3600s;

-o-animation-duration: 3600s;

animation-duration: 3600s; }

#clock span.hand.hour {

height: 30px;

width: 6px;

margin-left: -3px;

top: 30px;

-webkit-animation-duration: 43200s;

-moz-animation-duration: 43200s;

-ms-animation-duration: 43200s;

-o-animation-duration: 43200s;

animation-duration: 43200s;

}

@-webkit-keyframes rotate {

0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} }

@-moz-keyframes rotate {

0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);} }

@-ms-keyframes rotate {

0% { -ms-transform: rotate(0deg);} 100% { -ms-transform: rotate(360deg);} }

@-o-keyframes rotate {

0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);} }

@keyframes rotate {

0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }