HTML制作一个日蚀的动画特效

本文链接：https://blog.csdn.net/qq_33851668/article/details/139604062

大家好，今天制作一个日蚀动画特效！

先看具体效果：

在这里插入图片描述

使用一个逐渐扩大的圆形阴影来模拟月亮遮挡太阳的效果。使用了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来计算阴影的形状和位置。