网站夜间模式切换新增过度动画样式

要实现网站夜间模式切换的过度动画样式，可以通过结合CSS3的过渡（transition）和动画（animation）属性来创建平滑的效果。以下是几种常见的方法和技术实现细节：

1. 使用CSS过渡（Transition）实现平滑切换

在全局CSS样式中定义dark模式的样式，并同时为需要切换的属性（如颜色、背景等）添加过渡效果。例如：

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
  background-color: #222;
  color: #fff;
}

这样，当添加或移除dark-mode类时，背景色和文字颜色会平滑过渡。

2. 动画切换效果

通过CSS动画来实现更复杂的过渡效果，如渐变、旋转等。例如：

@keyframes darkToggle {
  0% { opacity: 0; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(180deg); }
}

.toggle-animation {
  animation: darkToggle 0.5s ease forwards;
}

可以在切换模式时添加这个类来实现动画效果。

3. JavaScript控制切换与动画

使用JavaScript来动态添加或移除类，同时控制动画的触发：

function toggleDarkMode() {
  const body = document.body;
  body.classList.toggle('dark-mode');
  const toggleBtn = document.querySelector('.toggle-btn');
  toggleBtn.classList.add('toggle-animation');
  setTimeout(() => {
    toggleBtn.classList.remove('toggle-animation');
  }, 500);
}

确保在切换时触发动画，并在动画结束后清除相关类。

4. 使用SVG和伪元素创建蒙层效果

通过CSS伪元素创建一个带有过渡效果的蒙层，在切换时给文档的根元素添加一个class：

:root {
  --overlay-color: rgba(0, 0, 0, 0);
}

.dark-mode::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--overlay-color);
  transition: background-color 0.5s ease;
}

.dark-mode-active::before {
  --overlay-color: rgba(0, 0, 0, 0.8);
}

使用JavaScript结合媒体查询和系统设置来增强用户体验，可以同步用户的系统主题偏好或提供手动切换选项。

通过以上技术手段，可以创建出既美观又实用的夜间模式切换动画效果，提升用户的视觉体验和操作的流畅性。