如何实现点击触发的网站渐变过渡（适配深色模式，非hover触发）

要实现点击触发的渐变过渡，核心思路是用类切换替代:hover伪类，配合CSS的transition属性来实现平滑过渡。以下是具体实现方案：

1. 基础CSS配置 #

先给目标元素（比如页面的body）设置初始的浅色渐变背景，同时添加transition属性，让背景变化时有平滑过渡效果：

body {
  /* 你的浅色渐变 */
  background: linear-gradient( 68.4deg,  rgba(248,182,204,1) 0.5%, rgba(192,198,230,1) 49%, rgba(225,246,240,1) 99.8% );
  /* 给背景变化添加过渡，时长可自行调整 */
  transition: background 0.5s ease;
  min-height: 100vh;
  margin: 0;
}

2. 定义深色模式类 #

创建一个.dark-mode类，放入你需要的深色渐变背景：

body.dark-mode {
  /* 你的深色渐变 */
  background: radial-gradient( circle farthest-corner at -4% -12.9%,  rgba(74,98,110,1) 0.3%, rgba(30,33,48,1) 90.2% );
}

3. JS实现点击切换 #

添加一个触发按钮，用JS监听点击事件，切换body上的.dark-mode类：

<!-- 页面中添加切换按钮 -->
<button id="toggleDarkMode">切换深色模式</button>

<script>
const toggleBtn = document.getElementById('toggleDarkMode');
const body = document.body;

toggleBtn.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
});
</script>

注意事项 #

• 复杂渐变的过渡效果：浏览器对不同类型渐变（比如radial-gradient和linear-gradient）之间的过渡支持有限，如果发现过渡不够平滑，可以把浅色和深色渐变统一成同一种类型（比如都用radial-gradient），调整参数让结构一致，这样过渡效果会更流畅。
• 过渡时长：transition里的0.5s可以根据需求调整，数值越大过渡越慢。

内容的提问来源于stack exchange，提问作者tyler-