cssは自動回転時計を作る

1.時計製造プロセス

一番外側のリングを作る
時間スケールを描画（配置+変換）
内側の文字盤を描画します（機能：時計の中央に配置して時間スケールをブロックし、一部のみを残して時間スケールの効果を達成します）
手を描く（時、分、秒）
最も内側のリング（針のシールド層）を描画します
アニメーションを時、分、秒針に個別に追加します

2.特定のコード


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
    
    
      width: 240px;
      height: 240px;
      margin: 100px auto;
      border: 5px solid #ccc;
      border-radius: 50%;
      position: relative;
    }

    .time {
    
    
      width: 4px;
      height: 100%;
      background-color: #ccc;
      position: absolute;
      top: 0;
      left: 118px;
    }

    .two {
    
    
      transform: rotate(30deg);
    }

    .three {
    
    
      transform: rotate(60deg);
    }

    .four {
    
    
      transform: rotate(90deg);
    }

    .five {
    
    
      transform: rotate(120deg);
    }

    .six {
    
    
      transform: rotate(150deg);
    }

    .mask1 {
    
    
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      left: 10px;
      top: 10px;
    }

    .hour,
    .min,
    .sec {
    
    
      height: 2px;
      position: absolute;
      left: 120px;
      top: 119px;
      transform-origin: 0px 1px;
    }

    .hour {
    
    
      width: 60px;
      background-color: green;
      transform: rotate(-90deg);
      animation: hourMove 86400s linear infinite;
    }

    @keyframes hourMove {
    
    
      0% {
    
    
        transform: rotate(-90deg);
      }

      100% {
    
    
        transform: rotate(270deg);
      }
    }

    .min {
    
    
      width: 80px;
      background-color: blue;
      transform: rotate(-30deg);
      animation: minMove 3600s linear infinite;
    }

    @keyframes minMove {
    
    
      0% {
    
    
        transform: rotate(-30deg);
      }

      100% {
    
    
        transform: rotate(330deg);
      }
    }

    .sec {
    
    
      width: 100px;
      background-color: red;
      animation: secMove 60s linear infinite;
    }

    @keyframes secMove {
    
    
      0% {
    
    
        transform: rotate(0deg);
      }

      100% {
    
    
        transform: rotate(360deg);
      }
    }

    .mask2 {
    
    
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #ccc;
      position: absolute;
      top: 110px;
      left: 110px;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 刻度值 -->
    <div class="time one"></div>
    <div class="time two"></div>
    <div class="time three"></div>
    <div class="time four"></div>
    <div class="time five"></div>
    <div class="time six"></div>
    <!-- 内表盘遮挡层 -->
    <div class="mask1"></div>
    <!-- 时针、分针、秒针 -->
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
    <!-- 最内层圆环（表针遮挡层） -->
    <div class="mask2"></div>
  </div>
</body>

</html>

1.時計製造プロセス

2.特定のコード

Webフロントエンド通信QQグループ：327814892

おすすめ