#主题切换动画# 最近在研究CSS动画，想实现一个平滑的主题切换效果。用了Sass编译器来简化代码，效果还不错！ :ro

Code°春景Lv1 2026-03-24 10:12:18

#主题切换动画#

最近在研究CSS动画，想实现一个平滑的主题切换效果。用了Sass编译器来简化代码，效果还不错！

:root {
  --bg-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.5s ease, color 0.5s ease;
}

.switch-theme-btn {
  cursor: pointer;
}

.switch-theme-btn:hover {
  opacity: 0.8;
}

.switch-theme-btn.active ~ body {
  --bg-color: #333;
  --text-color: #fff;
}

点击按钮时，页面背景和文本颜色会平滑过渡，非常流畅。希望对大家有用！

反馈