使用Trae做一个简单的天狗食日动画效果试试

如何使用纯CSS制作"天狗食日"动画的详细步骤和代码实现,模拟日食过程中月亮(天狗)逐渐遮挡太阳的效果:

实现思路

  1. 创建太阳(黄色圆形)和月亮(黑色圆形)
  2. 使用CSS动画让月亮沿水平方向移动遮挡太阳
  3. 添加背景渐变色模拟日食时的天空明暗变化
  4. 使用滤镜增强光影效果

完整代码

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天狗食日CSS动画</title>
    <style>
        .sky {
            position: relative;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(to bottom, #1a2980, #26d0ce);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .sun {
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, #FFD700, #FF8C00);
            border-radius: 50%;
            box-shadow: 0 0 50px #FF4500, 0 0 100px rgba(255, 215, 0, 0.5);
            position: relative;
            z-index: 2;
        }
        
        .moon {
            width: 150px;
            height: 150px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            z-index: 3;
            animation: eclipse 8s ease-in-out infinite;
            filter: blur(1px); /* 边缘柔化 */
        }
        
        .flare {
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, transparent 60%, rgba(255, 69, 0, 0.3) 90%);
            border-radius: 50%;
            animation: pulse 3s ease-in-out infinite;
            z-index: 1;
        }
        
        @keyframes eclipse {
            0% { transform: translateX(-200px); }
            50% { transform: translateX(0); }
            100% { transform: translateX(200px); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 0.9; }
        }
        
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            animation: stars-appear 8s infinite;
        }
        
        @keyframes stars-appear {
            45%, 55% { opacity: 0.8; }
            0%, 40%, 60%, 100% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="sky">
        <div class="stars"></div>
        <div class="flare"></div>
        <div class="sun"></div>
        <div class="moon"></div>
    </div>
    
    <script>
        // 动态创建星空背景
        document.addEventListener('DOMContentLoaded', () => {
            const stars = document.querySelector('.stars');
            for (let i = 0; i < 200; i++) {
                const star = document.createElement('div');
                star.style.position = 'absolute';
                star.style.width = `${Math.random() * 3}px`;
                star.style.height = star.style.width;
                star.style.background = '#FFF';
                star.style.borderRadius = '50%';
                star.style.top = `${Math.random() * 100}%`;
                star.style.left = `${Math.random() * 100}%`;
                star.style.boxShadow = '0 0 5px white';
                stars.appendChild(star);
            }
        });
    </script>
</body>
</html>

视频效果

核心原理说明

  1. 太阳实现
    radial-gradient创建发光效果,box-shadow模拟日冕

  2. 月亮移动动画
    @keyframes eclipse控制月亮从左到右的水平移动:

    css 复制代码
    @keyframes eclipse {
      0% { transform: translateX(-200px); }   /* 起始位置(左侧) */
      50% { transform: translateX(0); }      /* 完全遮挡太阳 */
      100% { transform: translateX(200px); } /* 移出右侧 */
    }
  3. 光影效果增强

    • .flare元素使用半透明渐变模拟日珥
    • filter: blur(1px)柔化月亮边缘
    • animation: pulse实现光晕脉动效果
  4. 星空特效

    JavaScript动态生成200个随机位置的白色圆点,在日全食阶段浮现(通过stars-appear动画控制透明度)

相关推荐
_殊途30 分钟前
HTML-CSS项目练习
前端·css·html
@AfeiyuO35 分钟前
el-table 表格嵌套表格
前端·elementui·vue
我是华为OD~HR~栗栗呀2 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java2 小时前
vivo响应式官网
前端·css·html·1024程序员节
web打印社区8 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗8 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长8 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅9 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_9 小时前
Chrome开发者工具
前端·chrome
YiHanXii9 小时前
this 输出题
前端·javascript·1024程序员节