861模板网站 > 网页特效 > 其它特效 > Js css3实现圆形的摇摆时钟挂钟代码

Js css3实现圆形的摇摆时钟挂钟代码

时钟和挂钟是经典的视觉元素，它们可以为网站或者应用程序添加一些独特的风味和个性。在这篇文章中，我们将会使用JavaScript和CSS3来实现一个圆形的摇摆时钟挂钟，提供相应的代码示例并解释代码的实现过程。

HTML 结构设计

我们需要在 HTML 中创建相应的结构，代码如下所示：

<div class="clock">
  <div class="hour">
    <div class="hand"></div>
  </div>
  <div class="minute">
    <div class="hand"></div>
  </div>
  <div class="second">
    <div class="hand"></div>
  </div>
  <div class="center"></div>
</div>

在该代码中，我们创建了一个名为 clock 的 div 元素，在该元素下创建了 hour、minute 和 second 三个子元素，再在每个子元素下分别创建一个名为 hand 的 div 元素。我们还添加了一个名为 center 的 div 元素来用于表示时钟的中心。

CSS 样式定义

我们将为时钟挂钟添加 CSS 样式，包括时针、分针、秒针和转动效果等属性。代码如下所示：

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f7f7f7;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.clock .hand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 0%;
  background: #222;
  z-index: 3;
}

.clock .second .hand {
  width: 2px;
  height: 80px;
}

.clock .minute .hand {
  width: 4px;
  height: 70px;
}

.clock .hour .hand {
  width: 6px;
  height: 60px;
}

.clock .center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #222;
}

.hour .hand {
  animation: hour 12s linear infinite;
}

.minute .hand {
  animation: minute 60s linear infinite;
}

.second .hand {
  animation: second 60s linear infinite;
}

@keyframes second {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes minute {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes hour {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这个 CSS 代码块中，我们定义了一些样式属性，这使得我们的时钟挂钟看起来更好看。它包括使用绝对定位定位手指并设置一个中心点、使用关键帧来控制每个手指的动画以及在样式中添加一些其他的可选属性。

JavaScript 事件监听器

我们需要添加一些 JavaScript 代码，使得时钟挂钟的动效能够生效，代码如下所示：

setInterval(() => {
  const date = new Date();
  const second = date.getSeconds() * 6;
  const minute = date.getMinutes() * 6 + second / 60;
  const hour = ((date.getHours() % 12) / 12) * 360 + 90 + minute / 12;

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

  hourHand.style.transform = `rotate(${hour}deg)`;
  minuteHand.style.transform = `rotate(${minute}deg)`;
  secondHand.style.transform = `rotate(${second}deg)`;
});