用css3制作一款精美的在线时钟

前言

在线预览 https://ihope_top.gitee.io/my-demo/demo/1/
文章已同步发表至公众号：百里青山

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

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

开发

初始化

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

表盘制作

接下来我们来制作表盘

面板

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

  <div id="watch">
    <!-- 表盘 -->
    <div class="frame-face"></div>
  </div>

首先我们给表盘一个基础样式来确定基本结构，再加点渐变和阴影，制造一点立体感

#watch .frame-face {
   
  position: relative;
  width: 30em;
  height: 30em;
  margin: 2em auto;
  border-radius: 15em;
  background: -webkit-linear-gradient(top, #f9f9f9, #666);
  background: -moz-linear-gradient(top, #f9f9f9, #666);
  background: linear-gradient(top, #f9f9f9, #666);
  box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8);
}

之后我们利用伪类元素，画一个径向渐变，来营造一个层次感，让表盘的立体感更加强烈

#watch .frame-face:before {
   
  content: '';
  width: 29.4em;
  height: 29.4em;
  border-radius: 14.7em;
  position: absolute;
  top: .3em;
  left: .3em;
  background: -webkit-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
  background: -moz-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
  background: radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
}

这样看着还是不太顺眼，我们再加一个伪类，制作变盘的主面板，通过阴影和渐变造成的对比效果，让这个表盘看起来更真实

#watch .frame-face:after {
   
  content: '';
  width: 28em;
  height: 28em;
  border-radius: 14.2em;
  position: absolute;
  top: .9em;
  left: .9em;
  box-shadow: inset rgba(0, 0, 0, .2) .2em .2em 1em;
  border: .1em solid rgba(0, 0, 0, .2);
  background: