介绍 & lt; div 类=癲ial"比;
& lt;/div>
& lt; div 类=癰igdiv bigdiv1", id=皊econdHand"比;
,,,& lt; div 类=皊econdHand"祝辞& lt;/div>
& lt;/div>
& lt; div 类=癰igdiv bigdiv2", id=癿inuteHand"比;
,,,& lt; div 类=癿inuteHand"祝辞& lt;/div>
& lt;/div>
& lt; div 类=癰igdiv bigdiv3", id=癶ourHand"比;
,,,& lt; div 类=癱enter"祝辞& lt;/div>
,,,& lt; div 类=癶ourHand"祝辞& lt;/div>
& lt;/div> .dial {
,,,宽度:600 px;
,,,身高:600 px;
,,,保证金:0,汽车;
,,,位置:,绝对;
,,,这个特性:,50%;
,,,溢出:,隐藏;
background - color,,,:, rgba (153、50204、0.2);
,,,背景图片:,url (img/表盘jpg);
,,,background-size:, 100%, 100%;
}
.bigdiv {
,,,宽度:600 px;
,,,身高:600 px;
,,,保证金:0,汽车;
,,,位置:,绝对;
,,,这个特性:,50%;
,,,溢出:,隐藏;
}
.bigdiv> div {
,,,位置:,绝对;
,,,左:298 px;
,,,这个特性:,100 px;
}
.bigdiv1 {
动画:,,,,moves 60 s 步骤(60),无限;
}
.bigdiv1 .secondHand {
,,,宽度:4 px;
,,,身高:250 px;
background - color,,,:,红色;
,,,:50 px;
,,,左:298 px;
}
.bigdiv2 {
动画:,,,,moves 3600 s 步骤(3600),无限;
}
.bigdiv2 .minuteHand {
,,,宽度:6 px;
,,,身高:180 px;
background - color,,,:,绿色;
,,,:120 px;
,,,左:297 px;
}
.bigdiv3 {
动画:,,,,moves 216000 s 步骤(216000),无限;
}
.bigdiv3 .hourHand {
,,,宽度:8 px;
,,,身高:160 px;
background - color,,,:,橙色;
,,,:140 px;
,,,左:296 px;
,,,这个特性:,100 px;
}
.bigdiv .center {
,,,:290 px;
,,,左:290 px;
,,,宽度:20 px;
,,,身高:20 px;
background - color,,,:,黑色;
,,,z - index:, 2;
}
@keyframes 移动{
从,,,{,变换:rotateZ(0度);,}
,,,,{,变换:rotateZ(360度),,}
} var date =, new 日期();
var hours =, date.getHours ();
var minutes =, date.getMinutes ();
var seconds =, date.getSeconds (); var secondAngle =,秒;
var minuteAngle =, minutes *, 60, +,秒;
var hourAngle =,(60/12), *,((12小时%),*,3600,+,minuteAngle); hourHand.style.cssText =,“animation-delay:,产生绯闻,+,hourAngle +“s";
时间=minuteHand.style.cssText “animation-delay:,产生绯闻,+,minuteAngle +“s";
时间=secondHand.style.cssText “animation-delay:,产生绯闻,+,secondAngle +“s";
这篇文章主要介绍了css3 + js绘制动态时钟的示例代码,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
先看看效果图:
首先,思考了一下页面的布局,大致需要4层div,最底层是一个表盘的背景图,然后其余3层分别是时针,分针,秒针的图层。
html代码如下:
变量名是随便起的,不要介意;类=中心的这个div是表中心那个小黑点。
时针是60 * 60 * 60年代转一圈,分针是60 * 60年代转一圈,秒针是60年代转一圈,所以css代码如下:
这一步做完后效果图是这个样子的:
然后用js计算当前时间,
然后计算当前每个针的旋转角度
现在的思路就是:每个针会按照自己定的时间转一圈,初始角度也能知道,怎么组成一个显示当前时间的动态钟表呢?
刚开始的想法是让这3层div旋转对应的角度,然后再开始,后来一想不行,因为它还是固定的时间旋转一周,指针指向会有偏差,
现在需要的是页面进来的第一圈旋转固定角度,其余的按照原来固定的时间旋转一周就行了,
css3里面有一个animation-delay属性,它表示的意思是动画延迟,负数就表示提前开始(比如5 s就表示动画从第5 s的时间开始),
刚好可以用到,让这几个指针提前开始对应的角度。
js代码如下:
