使用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动画控制透明度)

相关推荐
kura_tsuki几秒前
[Web网页] 零基础入门 HTML
前端·html
岁月宁静33 分钟前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
golang学习记33 分钟前
从0死磕全栈之Next.js Server Actions 入门实战:在服务端安全执行逻辑,告别 API 路由!
前端
光影少年1 小时前
vue3新增哪些内容以及api更改了哪些
前端·vue.js·掘金·日新计划
这儿有一堆花1 小时前
三种 弹出广告 代码开发实战
前端·html
练习时长一年1 小时前
Bean后处理器
java·服务器·前端
excel1 小时前
Vue 中 v-if 与 v-for 的优先级及最佳实践(Vue2 / Vue3 对比)
前端
吃饭最爱1 小时前
tomcat的功能和作用
前端
ObjectX前端实验室1 小时前
【图形编辑器架构】:编辑器的 Canvas 分层事件系统
前端·canvas·图形学
真的想不出名儿3 小时前
登录前验证码校验实现
java·前端·python