CSS 绘制一个时钟

练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？

你也可以访问这个 CSS clock或者以下代码片段查看实际效果

CSS clock

CSS 绘制这样一个布局有几个难点：

1. 环形排列的刻度
2. 环形分布的数字
3. 自动运行的指针

下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧

一、环形排列的刻度

提到“环形”，可以想到锥形渐变 conic-gradient。假设有这样一个容器

<clock></clock> 

加上一点锥形渐变

clock{
  width: 300px;
  height: 300px;
  background: conic-gradient(#333 0 15deg, #cddc39 0deg 30deg);
} 

可以得到这样的效果

如何做出交错相间的效果呢？可以试试 repeating-conic-gradient

clock{
  /**/
  background: repeating-conic-gradient(#333 0 15deg, #cddc39 0deg 30deg);
} 

效果如下

还是看不出和刻度有啥关系？没关系，我们把黑色部分的角度改小一点

clock{
  /**/
  background: repeating-conic-gradient(#333 0 1deg, #cddc39 0deg 30deg);
} 

效果如下

这样绘制出来的几条线是不是刚好可以对应时钟的刻度？

然后将整个形状变成圆环，可以用 MASK 来实现，实现如下

clock{
  /**/
  border-radius: 50%;
  -webkit-mask: radial-gradient(transparent 145px, red 0);
} 

效果如下

其实，这里还有一个小细节，黑色部分并不是居中的，需要修正一下（可以更改起始角度，指定 from）。然后，将这个草绿色换成透明就可以了，完整代码如下

clock{
  /**/
  background: repeating-conic-gradient(from -.5deg, #333 0 1deg, transparent 0deg 30deg);
  border-radius: 50%;
  -webkit-mask: radial-gradie