Knowledge:

  1. Locate the position
  2. Animationn and keyframes @keyFrames
  3. Pseudo-elements :before and :after

layout

    <main>
      <span>12</span>
      <span>3</span>
      <span>6</span>
      <span>9</span>
    </main>
Copy the code
  1. Clocks and watches
  2. The time scale
  3. Table clock heart
  4. Watch the second hand

The CSS of the clock:

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; }Copy the code

Time scale:

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;
      }
Copy the code

Write the second hand with main :after and animate it:

 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;
      }
Copy the code

Before I write the table

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

Keys:

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

conclusion

Use the absolute position +left+ TOP attribute to determine the position of the time scale and the position of the center and second. Animation Settings:

  1. Animation duration: 60s
  2. animation-timind-function:step(60,end)
  3. animation-iteration-count:inifite
  4. transform:ratate(360deg)

Use 60 seconds for one rotation, divided into 60 steps.