CSS3+JS实现多彩炫酷旋转圆环时钟效果

这个时钟效果将展示一个圆环，圆环上有不同颜色的刻度，指针会随着时间的流逝而旋转。

创建HTML结构

首先，我们需要创建一个HTML结构来容纳时钟的各个元素。在HTML文件中添加以下代码：

html 复制代码

<div class="clock">
  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
</div>

上述代码创建了一个名为clock的<div>元素，以及三个子元素hours、minutes和seconds，分别用于表示时、分和秒。

编写CSS样式

接下来，我们需要使用CSS样式来定义时钟的外观。在CSS文件中添加以下代码：

css 复制代码

.clock {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid #000;
  border-radius: 50%;
  margin: 50px auto;
  animation: rotate 60s infinite linear;
}

.hours,
.minutes,
.seconds {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  border-radius: 50%;
}

.hours {
  width: 6px;
  height: 80px;
}

.minutes {
  width: 4px;
  height: 120px;
}

.seconds {
  width: 2px;
  height: 140px;
}

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

上述代码定义了时钟的样式，包括圆环的样式、指针的样式以及旋转动画。clock的样式设置了宽度、高度、边框、边框圆角和居中对齐等属性。hours、minutes和seconds的样式设置了位置、尺寸、背景颜色和圆角等属性。rotate动画定义了从0度到360度的旋转效果。

编写JavaScript代码

最后，我们需要使用JavaScript代码来控制时钟指针的旋转。在JavaScript文件中添加以下代码：

javascript 复制代码

function updateClock() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  
  const hourHand = document.querySelector('.hours');
  const minuteHand = document.querySelector('.minutes');
  const secondHand = document.querySelector('.seconds');
  
  const hourRotation = (hours * 30) + (minutes / 2);
  const minuteRotation = (minutes * 6) + (seconds / 10);
  const secondRotation = seconds * 6;
  
  hourHand.style.transform = `rotate(${hourRotation}deg)`;
  minuteHand.style.transform = `rotate(${minuteRotation}deg)`;
  secondHand.style.transform = `rotate(${secondRotation}deg)`;
  
  setTimeout(updateClock, 1000);
}

updateClock();

上述代码定义了一个updateClock函数，用于更新时钟指针的旋转角度。在函数内部，首先获取当前的小时、分钟和秒数。然后，通过查询选择器获取时、分和秒指针的元素，并计算它们的旋转角度。最后，使用style.transform属性将旋转角度应用到相应的指针元素上。为了实现实时更新，使用setTimeout函数每秒调用一次updateClock函数。

引入CSS和JavaScript文件

最后一步是将CSS和JavaScript文件引入到HTML文件中。在HTML文件的<head>标签中添加以下代码：