HTML+CSS+JS：日夜交替

效果演示

实现了一个简单的日夜交替效果的动画。页面中包含了太阳、月亮和海洋的元素，通过切换按钮可以切换页面的主题，从白天切换到黑夜，或者从黑夜切换到白天。

Code

<div class="btn-box">
    <div class="sunBtn">
        <span class="iconfont icon-taiyang"></span> 白天模式
    </div>
    <div class="moonBtn">
        <span class="iconfont icon-moon"></span> 黑夜模式
    </div>
</div>

<div class="dark" id="container">
    <div class="bg"></div>
    <div class="moon-box">
        <div class="moon"></div>
    </div>
    <div class="sun-box">
        <div class="sun"></div>
    </div>
    <div class="sea"></div>
</div>

```css
body {
  margin: 0; /* 设置页面边距为0 */
  padding: 0; /* 设置页面内边距为0 */
}

#container {
  height: 100vh; /* 设置容器高度为视口高度 */
}

.bg {
  position: absolute; /* 设置背景元素绝对定位 */
  width: 100%; /* 设置宽度为100% */
  height: 100%; /* 设置高度为100% */
}

.sun {
  position: absolute; /* 设置太阳元素绝对定位 */
  top: 50%; /* 设置顶部距离为50% */
  left: 50%; /* 设置左侧距离为50% */
  transform: translate(-50%, -50%); /* 居中显示 */
  width: 600px; /* 设置宽度为600px */
  height: 600px; /* 设置高度为600px */
  background-color: orange; /* 设置背景颜色为橙色 */
  border-radius: 50%; /* 设置圆角为50%（圆形） */
}

.moon {
  position: absolute; /* 设置月亮元素绝对定位 */
  top: 50%; /* 设置顶部距离为50% */
  left: 50%; /* 设置左侧距离为50% */
  transform: translate(calc(-50% + -160px), calc(-50% + -180px)); /* 居中显示 */
  width: 600px; /* 设置宽度为600px */
  height: 600px; /* 设置高度为600px */
  box-shadow: 160px 180px 0 cyan; /* 使用阴影绘制月亮 */
  border-radius: 50%; /* 设置圆角为50%（圆形） */
}

.sea {
  position: absolute; /* 设置海洋元素绝对定位 */
  bottom: 0; /* 设置底部距离为0 */
  width: 100%; /* 设置宽度为100% */
  height: 35%; /* 设置高度为视口高度的35% */
  backdrop-filter: blur(100px); /* 使用背景模糊效果 */
  -webkit-backdrop-filter: blur(100px); /* 兼容性设置 */
  z-index: 100; /* 设置层级为100 */
}

.sun-box,
.moon-box,
.bg {
  transition: 1s ease-in-out; /* 设置过渡效果为1秒，缓入缓出 */
}

.sun-box,
.moon-box {
  position: relative; /* 设置太阳和月亮盒子相对定位 */
  overflow: hidden; /* 内容溢出隐藏 */
}

.light .sun-box {
  height: 100%; /* 设置太阳盒子高度为100% */
}
.light .moon-box {
  height: 0; /* 设置月亮盒子高度为0 */
}
.light .bg {
  background-color: #ffeea2; /* 设置白天背景颜色 */
}

.dark .sun-box {
  height: 0; /* 设置太阳盒子高度为0 */
}
.dark .moon-box {
  height: 100%; /* 设置月亮盒子高度为100% */
}
dark .bg {
  background-color: #040720; /* 设置黑夜背景颜色 */
}

.btn-box {
  position: absolute; /* 设置按钮盒子绝对定位 */
  top: 5px; /* 设置顶部距离为5px */
  right: 100px; /* 设置右侧距离为100px */
  z-index: 999; /* 设置层级为999 */
  display: flex; /* 设置为弹性布局 */
}

.btn-box div {
  width: 90px; /* 设置宽度为90px */
  height: 40px; /* 设置高度为40px */
  background: rgba(255, 255, 255, 0.7); /* 设置背景颜色为白色带透明度 */
  margin: 5px; /* 设置外边距为5px */
  line-height: 40px; /* 设置行高为40px */
  text-align: center; /* 文本居中 */
  font-size: 14px; /* 设置字体大小为14px */
  border-radius: 5px; /* 设置圆角为5px */
  cursor: pointer; /* 鼠标指针样式为手型 */
}

.btn-box div:hover {
  background: #fff; /* 鼠标悬停时背景颜色变为白色 */
}

const sunBtn = document.querySelector('.sunBtn')
const moonBtn = document.querySelector('.moonBtn')

sunBtn.addEventListener('click', function () {
  document.getElementById('container').setAttribute('class', 'light');
})

moonBtn.addEventListener('click', function () {
  document.getElementById('container').setAttribute('class', 'dark');
})