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

myzbx 2025-09-14 23:24 5 浏览

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

实现思路

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

完整代码

<!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>

视频效果

核心原理说明

太阳实现
radial-gradient 创建发光效果， box-shadow 模拟日冕
月亮移动动画
@keyframes eclipse 控制月亮从左到右的水平移动：

@keyframes eclipse {
  0% { transform: translateX(-200px); }
  50% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

光影效果增强
.flare 元素使用半透明渐变模拟日珥
filter: blur(1px) 柔化月亮边缘
animation: pulse 实现光晕脉动效果
星空特效
JavaScript动态生成200个随机位置的白色圆点，在日全食阶段浮现（通过 stars-appear 动画控制透明度）

DOM 动画

上一篇：从 “卡顿” 到 “秒开”:外投首屏性能优化的实战锦囊|得物技术
下一篇：Vue 自定义指令_vue 自定义指令把参数传出去

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

实现思路

完整代码

视频效果

核心原理说明

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用