介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title>时钟& lt;/title>
,,,& lt; style>
,,,,,,,* {
,,,,,,,,,,,填充:,0;
,,,,,,,,,,,保证金:,0;
,,,,,,,}
,,,,,,,.clock {
,,,,,,,,,,,宽度:,300 px;
,,,,,,,,,,,身高:,300 px;
,,,,,,,,,,,边界:,10 px solid # ccc;
,,,,,,,,,,,/*百分比参照的是实际宽高*/,,,,,,,,,,,这个特性:,50%;
,,,,,,,,,,,保证金:,20 px 汽车;
,,,,,,,,,,,位置:,相对;
,,,,,,,}
,,,,,,,.line {
,,,,,,,,,,,宽度:,8 px;
,,,,,,,,,,,身高:,300 px;
,,,,,,,,,,,背景颜色:,# ccc;
,,,,,,,,,,,位置:,绝对;
,
,,,,,,,,,,,/*实现居中*/,,,,,,,,,,,/*参照父元素的宽*/,,,,,,,,,,,左:,50%;
,,,,,,,,,,,:,0;
,,,,,,,,,,,/*参照元素本身*/,,,,,,,,,,,变换:,翻译(-50%,0);
,
,,,,,,,,,,,/*保留,否则会被覆盖*/,
,
,,,,,,,}
,,,,,,,.line2 {
,,,,,,,,,,,变换:,翻译(-50%,0),旋转(30度);
,,,,,,,}
,,,,,,,.line3 {
,,,,,,,,,,,变换:,翻译(-50%,0),旋转(60度);
,,,,,,,}
,,,,,,,.line4 {
,,,,,,,,,,,变换:,翻译(-50%,0),旋转(90度);
,,,,,,,}
,,,,,,,.line5 {
,,,,,,,,,,,变换:,翻译(-50%,0),旋转(120度);
,,,,,,,}
,,,,,,,.line6 {
,,,,,,,,,,,变换:,翻译(-50%,0),旋转(150度);
,,,,,,,}
,
,,,,,,,.cover {
,,,,,,,,,,,宽度:,250 px;
,,,,,,,,,,,身高:,250 px;
,,,,,,,,,,,这个特性:,50%;
,,,,,,,,,,,背景颜色:,# fff;
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,左:,50%;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了怎么利用html5制作一个时钟动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
我们先来看下效果图(不考虑颜色搭配):
我们首先要理解如何去实现这个时钟,暂时不要考虑动画,学着将问题进行拆解,一步一步实现。
首先我们需要画个方形,有个边框,给一个圆角就可以实现最外边的圆环再通过一个长的矩形旋转多个就可以实现刻度
只要再画一个白色圆面去覆盖就可以实现标准的刻度
最后再加上三个矩形和中间的小圆面就可以实现时钟的初始状态了
代码实现
以上过程理解了之后,代码实现就简单多了,唯一需要考虑的就是代码的优化问题,以下为了简单明了每一步是如何实现,存在很多重复的代码。
关于动画,我们只需要设置旋转动画就可以了,时分秒针的动画只需要改变不同的时间就可以了。
具体细节注意见代码:
