前期准备

先上效果图，颜色搭配暂时没考虑，以实现功能为主。

我们首先要理解如何去实现这个时钟，暂时不要考虑动画，学着将问题进行拆解，一步一步实现。

首先我们需要画个方形，有个边框，给一个圆角就可以实现最外边的圆环
再通过一个长的矩形旋转多个就可以实现刻度

只要再画一个白色圆面去覆盖就可以实现标准的刻度

最后再加上三个矩形和中间的小圆面就可以实现时钟的初始状态了

代码实现

以上过程理解了之后，代码实现就简单多了，唯一需要考虑的就是代码的优化问题，以下为了简单明了每一步是如何实现，存在很多重复的代码。

关于动画，我们只需要设置旋转动画就可以了，时分秒针的动画只需要改变不同的时间就可以了。

具体细节注意见代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>时钟</title><style>*{padding: 0;margin: 0;}.clock{width: 300px;height: 300px;border: 10px solid #ccc;/*百分比参照的是实际宽高*/border-radius: 50%;margin: 20px auto;position: relative;}.line{width: 8px;height: 300px;background-color: #ccc;position: absolute;/*实现居中*//*参照父元素的宽*/left: 50%;top: 0;/*参照元素本身*/transform: translate(-50%,0);/*保留，否则会被覆盖*/}.line2{transform: translate(-50%,0) rotate(30deg);}.line3{transform: translate(-50%,0) rotate(60deg);}.line4{transform: translate(-50%,0) rotate(90deg);}.line5{transform: translate(-50%,0) rotate(120deg);}.line6{transform: translate(-50%,0) rotate(150deg);}.cover{width: 250px;height: 250px;border-radius: 50%;background-color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}.hour{width: 6px;height: 80px;background-color: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-100%);/*设置轴心*/transform-origin: center bottom;/*动画*/-webkit-animation: move 43200s linear infinite;}.minute{width: 4px;height: 90px;background-color: green;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-100%);/*设置轴心*/transform-origin: center bottom;/*动画*/-webkit-animation: move 3600s linear infinite;}.second{width: 2px;height: 100px;background-color: blue;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-100%);/*设置轴心*/transform-origin: center bottom;/*动画*/-webkit-animation: move 60s infinite steps(60);/*linear与step(60)重复*/}.center{width:20px;height:20px;background-color: #ccc;border-radius: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}/*创建移动动画*/@keyframes move{0%{transform: translate(-50%,-100%) rotate(0deg);}100%{transform: translate(-50%,-100%) rotate(360deg);}}</style>
</head>
<body>
<div class="clock"><div class="line line1"></div><div class="line line2"></div><div class="line line3"></div><div class="line line4"></div><div class="line line5"></div><div class="line line6"></div><div class="cover"></div><div class="hour"></div><div class="minute"></div><div class="second"></div><div class="center"></div>
</div>
</body>
</html>

HTML5实现一个时钟动画相关推荐

HTML5实现一个时钟动画,javascript实现时钟动画
本文实例为大家分享了javascript实现时钟动画的具体代码,供大家参考,具体内容如下时针转动 * { margin: 0; padding: 0; } body, html { height: ...
HTML5实现一个时钟动画,利用html5制作一个时钟动画效果
我们先来看下效果图(不考虑颜色搭配): (学习视频分享:html5视频教程) 我们首先要理解如何去实现这个时钟,暂时不要考虑动画,学着将问题进行拆解,一步一步实现. 首先我们需要画个方形,有个边框,给 ...
14款形态各异的超时尚HTML5时钟动画
14款超时尚的HTML5时钟动画(附源码) 时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5 ...
14款超时尚的HTML5时钟动画
时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...
css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
学习用 JS/CSS 画一个时钟
看到某君的时钟 Clock 代码,想学习怎么画一个时钟,逐重构之,把里面不合理的地方改进(例如用 js 写 css,那肯定不好). 全部代码如下: <html> <head>& ...
html5时钟代码菜鸟课程,html5绘制时钟动画
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下复制代码代码如下: var clock=document.getElementById("clock"); var ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
运用计算机来动画制作的视频,如何制作一个时钟转动动画视频?电脑制作动画的软件制作时钟转动的小视频的方法...
今天小编要来介绍的是制作动画的软件,可以用于制作时钟转动的动画效果,之前小编就介绍过时钟动画制作的方法,但今天的方法更先进哦,这里的时钟的样式还有颜色都可以自定义的哦.制作动画的软件是什么?不是手机自 ...

HTML5实现一个时钟动画

前期准备

代码实现

HTML5实现一个时钟动画相关推荐

最新文章

热门文章