如何用css动画做时钟,简易时钟动画

这就是我说的简易的表盘，有点简陋了 QaQ

刚学习的时钟动画，觉得还有很多东西要去学习，有时候发现代码真是很神奇的。

首先呢 我们需要有一个圆的轮廓，这个就是定义一个div宽和高相同，然后用到了一个css3的属性 border-radius：50% 50% 当然只要是大于等于50%都是可以成圆的。

轮廓做出来后我们需要插入60个表盘上的刻度。这个时候有两种办法

1.可以用dom进行插入

var oDial=document.getElementById("dial");

for(var i=0;i<60;i++) {

var oLi=document.createElement("li");

oDial.appendChild(oLi);

}

2.可以用html结构插入

var Lis="";

for(var i=0;i<60;i++) {

Lis+="

";

}

oDial.innerHTML=Lis;

表盘刻度插入以后呢我们需要对这60个刻度进行定位写出旋转的原点然后每个刻度都在上一个刻度的基础上多旋转6° 我们需要写出表针用三个div分别表示时针 分针 秒针并且这三个需要在一个点上进行旋转 那就是三个div的底部

然后我们应该知道现在所处的时间是多少 这是我们需要用到js了。

创建一个Date的对象 并且用三个变量分别表示小时 分钟 秒并存放到一个函数中。

var now=new Date();

var hour=now.getHours();

var second=now.getSeconds();

var minute=now.getMinutes();

当得到时间以后 得到这三个dom对象

var oSecond=document.getElementById("second");

var oMinute=document.getElementById("minute");

var oHour=document.getElementById("hour");

当得到这三个dom对象时需要进行转动用到transform：rotate(度数)

oSecond.style.transform="rotate("+ second * 6+"deg)";

oMinute.style.transform="rotate("+ minute*6 +"deg)";

oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";

最后封装好的函数run的代码如下：

function run() {

var now=new Date();

var hour=now.getHours();

var second=now.getSeconds();

var minute=now.getMinutes();

oSecond.style.transform="rotate("+ second * 6+"deg)";

oMinute.style.transform="rotate("+ minute*6 +"deg)";

oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";

这样只能转动一次 我们需要开一个定时器把run这个函数放进去

setInterval(run,1000);

html代码：

css代码

* {

padding: 0;

margin: 0;

}

#clock {

width: 200px;

height: 200px;

border-radius: 50%;

border: 1px solid ;

margin: 200px auto;

position: relative;

}

li {

list-style: none;

width: 2px;

height: 6px;

background: black;

position: absolute;

left: 100px;

top: 0;

transform-origin: 0 100px;

}

#dial li:nth-child(5n+1) {

height: 10px;

}

#clock div {

transform-origin: bottom;

}

#hour{

width: 4px;

height: 40px;

background: #000000;

position: absolute;

left: 98px;

top: 60px;

}

#minute{

width: 4px;

height: 60px;

background: #999;

position: absolute;

left: 98px;

top: 40px;

}

#second{

width: 2px;

height: 70px;

background: #ff0000;

position: absolute;

left: 99px;

top: 30px;

}

全部代码:

Title

* {

padding: 0;

margin: 0;

}

#clock {

width: 200px;

height: 200px;

border-radius: 50%;

border: 1px solid ;

margin: 200px auto;

position: relative;

}

li {

list-style: none;

width: 2px;

height: 6px;

background: black;

position: absolute;

left: 100px;

top: 0;

transform-origin: 0 100px;

}

#dial li:nth-child(5n+1) {

height: 10px;

}

#clock div {

transform-origin: bottom;

}

#hour{

width: 4px;

height: 40px;

background: #000000;

position: absolute;

left: 98px;

top: 60px;

}

#minute{

width: 4px;

height: 60px;

background: #999;

position: absolute;

left: 98px;

top: 40px;

}

#second{

width: 2px;

height: 70px;

background: #ff0000;

position: absolute;

left: 99px;

top: 30px;

}

var oClock=document.getElementById("clock");

var oDial=document.getElementById("dial");

var oSecond=document.getElementById("second");

var oMinute=document.getElementById("minute");

var oHour=document.getElementById("hour");

var Lis="";

for(var i=0;i<60;i++) {

// var oLi=document.createElement("li");

// oDial.appendChild(oLi);

Lis+="

";

}

oDial.innerHTML=Lis;

function run() {

var now=new Date();

var hour=now.getHours();

var second=now.getSeconds();

var minute=now.getMinutes();

oSecond.style.transform="rotate("+ second * 6+"deg)";

oMinute.style.transform="rotate("+ minute*6 +"deg)";

oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";

}

run();

setInterval(run,1000);

写的不好 还望各位指出错误 共同进步。