基于HTML5+CSS3效果实现的简单的时钟

目的：

利用HTML5和CSS实现钟摆效应

知识点：

1）利用位置左/左/上、下（）实现单元的水平和垂直中心。

2）使用动画 / /变换变换的CSS3属性来定义动画的起源；

3）利用变换原点实现旋转原点的中心调整。

不要说太多废话，直接看代码，具体代码如下所示：
李{
列表样式：无；
}
#箱{
宽度：400px；
身高：400px；
位置：绝对；
上图：钙（50% 200px）；
左：钙（50% 200px）；
边境：2px固体paleldenrod；
}
#拨{
宽度：200px；
身高：200px；
位置：绝对；
上图：钙（50% - 100像素）；
左：钙（50% - 100像素）；
边境：2px固体青色；
边框半径：50%；
}
scaleindex {。
宽度：4px；
身高：12px；
位置：绝对；
顶部：0；
左：钙（50% 2PN）；
背景颜色：灰色；
来源：2px 100px变换；
}
。angle30 {变换：旋转（30deg）；}
。60 {变换：旋转（60度）；}
。90 {变换：旋转（90度）；}
.angle120{transform: rotate (120Deg);}
。angle150 {变换：旋转（150deg）；}
。角180 {变换：旋转（180deg）；}
。angle210 {变换：旋转（210deg）；}
。angle240 {变换：旋转（240deg）；}
。angle270 {变换：旋转（270deg）；}
。angle300 {变换：旋转（300deg）；}
。angle330 {变换：旋转（330deg）；}
#不动点{
宽度：10px；
身高：10px；
位置：绝对；
上图：钙（50%～5px）；
左：钙（50%～5px）；
背景颜色：军蓝色；
边框半径：50%；
}
#时针{
宽度：6px；
身高：70px；
位置：绝对；
上图：40px；
左：钙（50% - 3px）；
背景颜色：深蓝色；
来源：50% 60px变换；
}
#分针{
宽度：4px；
身高：75px；
位置：绝对；
上图：35px；
左：钙（50% 2PN）；
背景颜色：黄色；
来源：50% 65px变换；
}
#二手{
宽度：2px；
身高：90px；
位置：绝对；
上图：20px；
左：钙（50% - 1px）；
背景颜色：红色；
来源：50% 80px变换；
}


在window.onload =函数（）{
VaR时针= document.getelementbyid（'hourhand）；
VaR分针= document.getelementbyid（'minutehand）；
VaR二手= document.getelementbyid（'secondhand）；
setInterval（）{（）函数（
VAR时间=新的日期（）；
无功hourvalue = currenttime.gethours（）；
无功hourangle = hourvalue / 24 * 360 + 'deg；
无功minutevalue = currenttime.getminutes（）；
无功minuteangle = minutevalue / 60 * 360 + 'deg；
无功secondvalue = currenttime.getseconds（）；
无功secondangle = secondvalue / 60 * 360 + 'deg；
console.log（hourangle）；
方法：使用jQuery（）增加属性
无功cmdhour = 'rotate（hourangle ++）；
$（#时针）。Css（{变换：'rotate（+ hourangle + '）' }）；
无功cmdminute = 'rotate（minuteangle ++）；
$（#分针）。Css（{变换：cmdminute }）；
无功cmdsecond = 'rotate（secondangle ++）；
$（#二手）。Css（{变换：cmdsecond }）；

两种方法：使用样式/ DOM元素属性集
/ / hourhand.style.transform = 'rotate（+ hourangle +）；
/ / minutehand.style.transform = 'rotate（+ minuteangle +）；
/ / secondhand.style.transform = 'rotate（+ secondangle +）；

}，1000）；
}
总结

以上是萧边介绍给你，基于HTML5和CSS3实现的一个简单的时钟的影响，希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。