文章已同步发表至公众号：百里青山

前言

前两天翻资料，找到了刚开始学习前端的时候学习的一个小案例，用css去画一个转动的表盘，也不知道大家都写过没有，样子如下图所示

预览图.gif

今天把这个小案例分享给大家，这个效果原案例是完全用css实现的，因为表针转动都有规律可循，设置一个定时的动画就行，我为了简化代码量，并且可以获取当前的时间，所以用js优化了一下，因为案例很小，所以就不用框架了，直接原生走起，由于这种简单的文章主要面向初学者，所以会说的详细一点

开发

初始化

第一步，找一个文件夹，建立 index.html ， 然后引入一个 style.css 并初始化一些样式

image.png

表盘制作

接下来我们来制作表盘

面板

首先是面板部分，面板的html部分我们就只用一个节点就够了，其他都用css来完成