#主题切换动画#

本话题发布主题切换动画相关的笔记内容和开发经验，将持续更新，为您推荐了1条笔记，访问即可查看更多精彩内容。

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;
}

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

原文反馈