css画钟表_css3+js绘制动态时钟（附代码）本章给⼤家介绍如何使⽤css3与js实现动态时钟效果，有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你有所帮助。
先看看效果图：
⾸先，思考了⼀下页⾯的布局,⼤致需要4层div，最底层是⼀个表盘的背景图，然后其余3层分别是时针，分针，秒针的图层.
html代码如下：
变量名是随便起的，不要介意; class=center的这个div是表中⼼那个⼩⿊点.
时针是60*60*60s转⼀圈, 分针是60*60s转⼀圈, 秒针是60s转⼀圈, 所以css代码如下：.dial{
width:600px;
height:600px;
margin:0 auto;
position: absolute;
border-radius: 50%;
overflow: hidden;
background-color: rgba(153,50,204,0.2);
background-image: url(img/表盘.jpg);
background-size: 100% 100%;
}
.bigdiv{
width:600px;
height:600px;
margin:0 auto;
position: absolute;
border-radius: 50%;
overflow: hidden;
}
.bigdiv>div{
position: absolute;
left:298px;
border-radius: 100px;
}
.bigdiv1{
animation: moves 60s steps(60) infinite;
.bigdiv1 .secondHand{
width:4px;
height:250px;
background-color: red;
top:50px;
left:298px;
}
.bigdiv2{
animation: moves 3600s steps(3600) infinite;
}
.bigdiv2 .minuteHand{
width:6px;
height:180px;
background-color: green;
top:120px;
left:297px;
}
.bigdiv3{
animation: moves 216000s steps(216000) infinite; }
.bigdiv3 .hourHand{
width:8px;
height:160px;
background-color: orange;
top:140px;
left:296px;
border-radius: 100px;
}
.bigdiv .center{
top:290px;
left:290px;
width:20px;
height:20px;
z-index: 2;
}
@keyframes moves{
from{ transform: rotateZ(0deg); }
to{ transform: rotateZ(360deg); }
}
这⼀步做完后效果图是这个样⼦的:
然后⽤js计算当前时间,var date = new Date();
var hours = Hours();
var minutes = Minutes();
var seconds = Seconds();
然后计算当前每个针的旋转⾓度var secondAngle = seconds;
var minuteAngle = minutes * 60 + seconds;
var hourAngle = (60/12) * ((hours%12) * 3600 + minuteAngle);js控制css3动画触发
现在的思路就是：每个针会按照⾃⼰定的时间转⼀圈，初始⾓度也能知道，怎么组成⼀个显⽰当前时间的动态钟表呢?
刚开始的想法是让这3层div旋转对应的⾓度，然后再开始，后来⼀想不⾏，因为它还是固定的时间旋转⼀周，指针指向会有偏差,
现在需要的是页⾯进来的第⼀圈旋转固定⾓度，其余的按照原来固定的时间旋转⼀周就⾏了,
css3⾥⾯有⼀个animation-delay属性，它表⽰的意思是动画延迟，负数就表⽰提前开始(⽐如-5s就表⽰动画从第5s的时间开始)，刚好可以⽤到，让这⼏个指针提前开始对应的⾓度.
js代码如下：hourHand.style.cssText = "animation-delay: -"+ hourAngle +"s";
minuteHand.style.cssText = "animation-delay: -"+ minuteAngle +"s";
secondHand.style.cssText = "animation-delay: -"+ secondAngle +"s";
最后⾃⼰再加了个动态时间在钟表的上⾯展⽰
完整代码：
body,
html {
margin: 0;
}
.location {
position: relative;
width: 600px;
height: 600px;
left: calc(50% - 300px);
.dial {
width: 600px;
height: 600px;
margin: 0 auto;
position: absolute;
border-radius: 50%;
overflow: hidden;
background-color: rgba(153, 50, 204, 0.2); background-image: url(img/表盘.jpg); background-size: 100% 100%;
}
.bigdiv {
width: 600px;
height: 600px;
margin: 0 auto;
position: absolute;
border-radius: 50%;
overflow: hidden;
}
.bigdiv>div {
position: absolute;
left: 298px;
border-radius: 100px;
}
.bigdiv1 {
animation: moves 60s steps(60) infinite;
}
.bigdiv1 .secondHand {
width: 4px;
height: 250px;
background-color: red;
top: 50px;
left: 298px;
.bigdiv2 {
animation: moves 3600s steps(3600) infinite;
}
.
bigdiv2 .minuteHand {
width: 6px;
height: 180px;
background-color: green;
top: 120px;
left: 297px;
}
.bigdiv3 {
animation: moves 216000s steps(216000) infinite; }
.bigdiv3 .hourHand {
width: 8px;
height: 160px;
background-color: orange;
top: 140px;
left: 296px;
border-radius: 100px;
}
.bigdiv .center {
top: 290px;
left: 290px;
width: 20px;
height: 20px;
background-color: black;
z-index: 2;
}
@keyframes moves {
from {
transform: rotateZ(0deg);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。