纯css制作的钟表如背景图所示

知识点：

1. 定位position
2. 动画animationn和关键帧@keyframes
3. 伪元素:before和:after

布局

    <main>
      <span>12</span>
      <span>3</span>
      <span>6</span>
      <span>9</span>
    </main>

1. 钟表
2. 时间刻度
3. 钟表表心
4. 钟表秒针

钟表的css:

 main {
        background: white;
        border-radius: 50%;
        width: 200px;
        height: 200px;
        position: relative;
        background-image: url("../images/bg.jpeg");
        background-position: center;
        background-size: 200px 200px;
      }

时间刻度：

span {
        display: inline-block;
        height: 20px;
        width: 20px;
        text-align: center;
        position: absolute;
      }
      span:nth-child(1) {
        left: 100px;
        margin-left: -10px;
      }
      span:nth-child(2) {
        top: 100px;
        margin-top: -10px;
        left: 180px;
      }
      span:nth-child(3) {
        left: 100px;
        top: 180px;
        margin-left: -10px;
      }
      span:nth-child(4) {
        top: 100px;
        margin-top: -10px;
      }

用main的:after写秒秒针并为其加上动画clock：

 main::after {
        content: "";
        background: black;
        height: 50%;
        width: 1px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        transform-origin: bottom;
        position: absolute;
        animation: clock 60s steps(60, end) infinite;
      }

:before写表心：

 main::before {
        content: "";
        background: black;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
      }

关键帧:

  @keyframes clock {
        to {
          transform: translateX(-50%) rotate(360deg);
        }
      }

总结

使用绝对定位+left+top属性确定时间刻度的位置及表心和秒钟的位置。 动画的设置：

1. 动画时长：60s
2. animation-timind-function:step(60,end)
3. animation-iteration-count:inifite
4. transform:ratate(360deg) 旋转一圈使用60s,分60步走。