采用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>