java argox_HTML+CSS3再加一点点JS做的一个小时钟

第一次发文章，比较激动。

本码农长期浸淫于Dribbble等设计师网站，看到那些好看的设计作品就非常激动，但是无奈PS不精通，AI也早忘光了，只不过对前端略有研究，偶然间看到几个设计清爽的时钟，觉得用CSS实现起来应该也没什么难度，于是花了个把钟头琢磨了一个出来。

效果图

技术点

box-shadow 表盘的质感什么的全靠它了

nth-child(x) 用于表盘刻度的定位什么的

transform-origin 这个用来定位三个表针旋转的中心点

keyframes 表针动画效果

流程

先设计好DOM结构，代码如下：

结构很简单，从样式名可以看出来每个元素的用处，中间那段空div自然就是表盘刻度了。

接下来是CSS代码

html,body{

height: 100%;

margin: 0;

padding: 0;

background-image: linear-gradient(#e7e7e7,#d7d7d7);

}

/*时钟容器*/

.clock-wrapper{

position: absolute;

top: 0;

right: 0;

bottom: 100px;

left: 0;

width: 250px;

height: 250px;

margin: auto;

padding: 5px;

background-image: linear-gradient(#f7f7f7,#e0e0e0);

border-radius: 50%;

box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);

}

/*表盘*/

.clock-base{

width: 250px;

height: 250px;

background-color: #eee;

border-radius: 50%;

box-shadow: 0 0 5px #eee;

}

/*表盘刻度容器*/

.click-indicator{

position: absolute;

z-index: 1;

top: 15px;

left: 15px;

width: 230px;

height: 230px;

}

/*表盘刻度*/

.click-indicator div{

position: absolute;

width: 2px;

height: 4px;

margin: 113px 114px;

background-color: #ddd;

}

/*分别设置各个刻度的位置和角度*/

.click-indicator div:nth-child(1) {

transform: rotate(30deg) translateY(-113px);

}

.click-indicator div:nth-child(2) {

transform: rotate(60deg) translateY(-113px);

}

.click-indicator div:nth-child(3) {

transform: rotate(90deg) translateY(-113px);

background-color: #aaa;

}

.click-indicator div:nth-child(4) {

transform: rotate(120deg) translateY(-113px);

}

.click-indicator div:nth-child(5) {

transform: rotate(150deg) translateY(-113px);

}

.click-indicator div:nth-child(6) {

transform: rotate(180deg) translateY(-113px);

background-color: #aaa;

}

.click-indicator div:nth-child(7) {

transform: rotate(210deg) translateY(-113px);

}

.click-indicator div:nth-child(8) {

transform: rotate(240deg) translateY(-113px);

}

.click-indicator div:nth-child(9) {

transform: rotate(270deg) translateY(-113px);

background-color: #aaa;

}

.click-indicator div:nth-child(10) {

transform: rotate(300deg) translateY(-113px);

}

.click-indicator div:nth-child(11) {

transform: rotate(330deg) translateY(-113px);

}

.click-indicator div:nth-child(12) {

transform: rotate(360deg) translateY(-113px);

background-color: #c00;

}

/*时针*/

.clock-hour{

position: absolute;

z-index: 2;

top: 80px;

left: 128px;

width: 4px;

height: 65px;

background-color: #555;

border-radius: 2px;

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

transform-origin: 2px 50px;

transition: .5s;

-webkit-animation: rotate-hour 43200s linear infinite;

}

/*分针*/

.clock-minute{

position: absolute;

z-index: 3;

top: 60px;

left: 128px;

width: 4px;

height: 85px;

background-color: #555;

border-radius: 2px;

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

transform-origin: 2px 70px;

transition: .5s;

-webkit-animation: rotate-minute 3600s linear infinite;

}

/*秒针*/

.clock-second{

position: absolute;

z-index: 4;

top: 20px;

left: 129px;

width: 2px;

height: 130px;

background-color: #a00;

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

transform-origin: 1px 110px;

transition: .5s;

-webkit-animation: rotate-second 60s linear infinite;

}

.clock-second:after{

content: "";

display: block;

position: absolute;

left: -5px;

bottom: 14px;

width: 8px;

height: 8px;

background-color: #a00;

border: solid 2px #a00;

border-radius: 50%;

box-shadow: 0 0 3px rgba(0,0,0,.2);

}

/*表盘中央的原型区域*/

.clock-center{

position: absolute;

z-index: 1;

width: 150px;

height: 150px;

top: 55px;

left: 55px;

background-image: linear-gradient(#e3e3e3,#f7f7f7);

border-radius: 50%;

box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;

}

.clock-center:after{

content: "";

display: block;

width: 20px;

height: 20px;

margin: 65px;

background-color: #ddd;

border-radius: 50%;

}

样式文件就这些，不过这样的话三个指针都是在12点的，接下来需要让指针动起来。

其实简单点的话直接在css里面定好动画规则就行了:时针43200秒旋转360度，分针秒针以此类推。

但是强迫症表示这样坚决不行，连正确的时间都不能指示的时钟肯定是山寨品，所以这里需要找CSS的好兄弟JavaScript借下力了：

(function(){

//generate clock animations

var now = new Date(),

hourDeg = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,

minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,

secondDeg = now.getSeconds() / 60 * 360,

stylesDeg = [

"@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",

"@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",

"@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"

].join("");

document.getElementById("clock-animations").innerHTML = stylesDeg;

})();

哦，千万别忘了在head标签里面放点东西：

不然JS生成的样式代码没地方安身啊。

--

就这些了，献个丑，各位轻拍~ ：)