用CSS动画制作有趣的时钟

2023-11-26 18:28:36

前言

时钟是我们生活中常见的一种计时工具。它通常由指针和表盘组成，通过指针的转动来指示时间。随着技术的发展，时钟也有了新的形式，比如用CSS动画制作的时钟。

CSS动画是一种利用CSS规则来创建动画效果的技术，可以用来制作各种各样的动画，包括时钟动画。CSS动画的优点是简单易用，而且可以实现非常复杂的动画效果。

实现步骤

1. HTML结构

首先，我们需要创建一个HTML结构来放置时钟。HTML结构如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="clock">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
  </div>
</body>
</html>

2. CSS样式

接下来，我们需要为时钟添加CSS样式。CSS样式如下：

#clock {
  width: 200px;
  height: 200px;
  position: relative;
}

.hour-hand {
  width: 10px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom;
  background-color: black;
}

.minute-hand {
  width: 5px;
  height: 75px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom;
  background-color: black;
}

.second-hand {
  width: 2px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom;
  background-color: red;
}

3. JavaScript代码

最后，我们需要添加JavaScript代码来设置时钟的初始时间并触发CSS动画。JavaScript代码如下：

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

  var hourHand = document.querySelector('.hour-hand');
  var minuteHand = document.querySelector('.minute-hand');
  var secondHand = document.querySelector('.second-hand');

  hourHand.style.transform = 'rotate(' + (hours * 30 + minutes / 2) + 'deg)';
  minuteHand.style.transform = 'rotate(' + (minutes * 6 + seconds / 10) + 'deg)';
  secondHand.style.transform = 'rotate(' + (seconds * 6) + 'deg)';

  setTimeout(setClock, 1000);
}

setClock();