大家好，今天制作一个日蚀动画特效！
先看具体效果：
使用一个逐渐扩大的圆形阴影来模拟月亮遮挡太阳的效果。使用了CSS的@keyframes动画和border-radius属性来创建一个简单的圆形阴影效果。
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>日蚀动画特效</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="sun-eclipse"><div class="sun"></div><div class="eclipse"></div></div>
</body>
</html>
CSS (styles.css)
body, html {height: 100%;margin: 0;display: flex;justify-content: center;align-items: center;background-color: #000;
}.sun-eclipse {position: relative;width: 300px;height: 300px;
}.sun {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;background: orange;box-shadow: 0 0 50px orange; /* 模拟日冕效果 */
}.eclipse {position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(0, 0, 0, 0.8);transform: translate(-50%, -50%);animation: eclipse-animation 10s infinite;
}@keyframes eclipse-animation {0% {width: 0;height: 0;}50% {width: 200px; /* 根据需要调整阴影大小 */height: 200px;}100% {width: 0;height: 0;}
}
在这个示例中，.sun-eclipse容器包含了一个.sun元素（太阳）和一个.eclipse元素（阴影）。阴影的动画通过eclipse-animation关键帧动画来实现，它在动画过程中逐渐扩大然后缩小到原点。你可以通过调整@keyframes动画中的width和height值来改变阴影的大小。
注意：这个示例中的阴影是一个完美的圆形，但在实际的日蚀中，月亮的形状和大小可能会因为与地球的距离和角度而变化。如果你想要更精确地模拟真实的日蚀效果，你可能需要使用更复杂的动画和JavaScript来计算阴影的形状和位置。
![[Cloud Networking] Layer 2 Protocol](https://img-blog.csdnimg.cn/direct/70300f65f3f8422498f323c38858672f.png)
