大家好，今天制作一个日蚀动画特效！
先看具体效果：
使用一个逐渐扩大的圆形阴影来模拟月亮遮挡太阳的效果。使用了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来计算阴影的形状和位置。
