让网页动起来，CSS3 时钟特效，分分钟做个动态网页

2024-01-26 22:10:26

css3 时钟特效

今天咱们做一个在网页做一个是时钟，大家可能会在自己的项目中用到，可以先看一下gif的动画，不是不是很清楚，下面会有代码块。简单的看一下 html 结构，我在这里用静态样式写了一个刻度，大家可以看下图片，这是我写的代码，用 CSS 画了一个圆形，然后添加了刻度和指针。

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      background-color: black;
    }

    #clock {
      width: 200px;
      height: 200px;
      border: 10px solid white;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #clock-face {
      width: 200px;
      height: 200px;
      background-color: black;
      border: 10px solid white;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #clock-hour-hand {
      width: 10px;
      height: 80px;
      background-color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
    }

    #clock-minute-hand {
      width: 5px;
      height: 100px;
      background-color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
    }

    #clock-second-hand {
      width: 2px;
      height: 120px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
    }
  </style>
</head>
<body>
  <div id="clock">
    <div id="clock-face"></div>
    <div id="clock-hour-hand"></div>
    <div id="clock-minute-hand"></div>
    <div id="clock-second-hand"></div>
  </div>

  <script>
    var clock = document.getElementById('clock');
    var clockFace = document.getElementById('clock-face');
    var clockHourHand = document.getElementById('clock-hour-hand');
    var clockMinuteHand = document.getElementById('clock-minute-hand');
    var clockSecondHand = document.getElementById('clock-second-hand');

    function updateClock() {
      var now = new Date();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();

      var hourDegrees = hours * 360 / 12 + minutes / 60 * 30;
      var minuteDegrees = minutes * 360 / 60 + seconds / 60 * 6;
      var secondDegrees = seconds * 360 / 60;

      clockHourHand.style.transform = 'translate(-50%, -50%) rotate(' + hourDegrees + 'deg)';
      clockMinuteHand.style.transform = 'translate(-50%, -50%) rotate(' + minuteDegrees + 'deg)';
      clockSecondHand.style.transform = 'translate(-50%, -50%) rotate(' + secondDegrees + 'deg)';
    }

    setInterval(updateClock, 1000);
  </script>
</body>
</html>