手把手教你纯CSS实现日食效果，打造惊艳视觉体验

前端

2023-10-16 09:52:57

前言

在浩瀚的宇宙中，天体运动规律而壮美，其中日食现象更是令人惊叹不已。随着计算机图形技术的发展，在数字世界中重现自然奇观成为可能。本文将带领你一步一步用纯CSS实现一个逼真的日食效果，打造出惊艳的视觉体验。

理解日食原理

日食是一种自然现象，发生在月球运行至太阳和地球之间，阻挡了阳光到达地球时。在日食过程中，月球的阴影逐渐覆盖太阳，形成不同的日食阶段，包括全食、偏食和环食。

创建日食效果

1. 设置容器

首先，我们需要创建一个容器来容纳日食效果。使用以下CSS代码创建div容器：

<div class="container">
  <!-- 日食效果代码 -->
</div>

2. 创建太阳

在容器内，使用div创建太阳：

<div class="sun"></div>

设置太阳的样式，包括背景色、圆角和尺寸：

.sun {
  background-color: #ffeb3b;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

3. 创建月亮

同样在容器内，使用div创建月亮：

<div class="moon"></div>

设置月亮的样式，包括背景色、圆角、尺寸和动画：

.moon {
  background-color: #000;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  animation: moon-move 10s infinite;
}

@keyframes moon-move {
  0% {
    transform: translate(-100px, -100px);
  }
  50% {
    transform: translate(100px, 100px);
  }
  100% {
    transform: translate(-100px, -100px);
  }
}

4. 创建阴影

为了模拟日食中的阴影，使用div创建阴影：

<div class="shadow"></div>

设置阴影的样式，包括背景色、圆角、尺寸和位置：

.shadow {
  background-color: #000;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

5. 添加动画

为了让月亮绕太阳运动，使用CSS动画：

@keyframes moon-move {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

完善效果

1. 微调阴影

阴影应该随着月亮的运动而逐渐变大，模拟日食过程中的阴影变化。使用CSS过渡来实现这一效果：

.shadow {
  transition: all 1s;
}

.moon-move .shadow {
  width: 300px;
  height: 300px;
}

2. 添加高光

为了增强日食效果的真实感，可以在月亮和太阳上添加高光：

.sun::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.5;
}

.moon::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 50px;
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.5;
}