使用CSS3绘制天狗食月日食动画特效

创建一个天狗食月（日食）的动画特效，我们可以使用CSS3的动画和变形特性。以下是一个简单的示例，展示了如何使用CSS3来制作这样的动画：

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="moon"></div>
    <div class="eclipse"></div>
</body>
</html>

CSS样式和动画 (styles.css):

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
}

.moon {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.eclipse {
    width: 200px;
    height: 200px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    clip-path: circle(0% at center);
    animation: eclipseAnimation 10s linear forwards;
    z-index: 2;
}

@keyframes eclipseAnimation {
    0% {
        clip-path: circle(0% at center);
    }
    100% {
        clip-path: circle(100% at center);
    }
}