采用hue-rotate做的七彩渐变时钟，可持续变色

本文以Vue3作为开发环境，其他请自行转换。可以随时间变换颜色，截图原因没有gif只有一张图。想要修改渐变的起始和结束颜色，只需要修改colorStrat中的对应值

效果图：

vue代码奉上：

<template>
  <div class="bigDiv">
    <div :style="colorStrat" class="clockDiv">
      <div class="clockTime">
        <div class="content">{{ time.hours }}:{{ time.minutes }}:{{ time.seconds }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";

// 存储时间
const time = reactive({
  hours: `00`,
  minutes: `00`,
  seconds: `00`,
});
// 将字符串填充为2位
const fillStr = (str) => str.toString().padStart(2, "0");
// 获取当前时间
const getNewDate = () => {
  let date = new Date();
  time.hours = fillStr(date.getHours()); //获取时
  time.minutes = fillStr(date.getMinutes()); //获取分钟
  time.seconds = fillStr(date.getSeconds()); //获取秒
};
// 每500毫秒更新时间
setInterval(() => {
  getNewDate();
}, 500);

const colorStrat = reactive({
  "--strat": `#ff0000`,
  "--end": `#00ff00`,
}); // 存储线性渐变色起始和结束颜色
</script>

<style scoped>
.bigDiv {
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clockDiv {
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  box-sizing: border-box;
  background-image: linear-gradient(60deg, var(--strat), var(--end));
  animation: animate 6s linear infinite; /* 添加渐变色变化动画 */
  position: relative;
}
.clockDiv::after,
.clockDiv::before {
  position: absolute;
  content: "";
  background-image: inherit; /* 继承父级样式 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 10px;
  filter: blur(20px); /* 添加高斯模糊效果 */
}
.clockDiv::before {
  filter: blur(120px);
}
.clockTime {
  background-color: black;
  border-radius: 10px;
  padding: 10px;
}

.content {
  font-size: 32px;
  -webkit-background-clip: text; /* 将背景色剪切到文字上 */
  background-image: linear-gradient(60deg, var(--strat), var(--end));
  font-weight: bolder;
  color: transparent;
}

@keyframes animate {
  100% {
    /* 色相变化 */
    filter: hue-rotate(360deg);
  }
}
</style>