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