我将您提供的银河样式和火焰效果结合，实现了「对应旋涡银河+火焰描边文字+火星飞溅」的效果，代码直接复制到浏览器即可运行：
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
background: #000;
overflow: hidden;
}
/* 旋涡银河背景（逆时针旋转+时隐时现） */
.galaxy {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url('https://i.imgur.com/your-galaxy-image.png') center/cover no-repeat;
/* 替换为您提供的银河图链接，此处用示例图占位 */
animation:
galaxy-rotate 30s linear infinite reverse,
fade 6s infinite alternate;
opacity: 0.7;
}
@keyframes galaxy-rotate {
from { transform: rotate(0deg) scale(1.2); }
to { transform: rotate(-360deg) scale(1.2); }
}
@keyframes fade {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
/* 居中容器 */
.center-container {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* 火焰描边文字（适当大小） */
.fire-text {
font-size: 160px;
font-weight: bold;
font-family: "Arial Black", sans-serif;
color: #000;
position: relative;
-webkit-text-stroke: 10px transparent;
background: linear-gradient(
45deg,
#ff5e00, #ff0000, #ffeb00, #ff5e00
);
background-clip: text;
-webkit-background-clip: text;
animation: fire-burn 3s infinite;
text-shadow: 0 0 20px #ff0000;
}
/* 火星飞溅层 */
.sparks {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.spark {
width: 4px;
height: 4px;
background: #ffd700;
position: absolute;
animation: spark-fly 2.5s infinite;
}
/* 动画定义 */
@keyframes fire-burn {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes spark-fly {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-250px) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="galaxy"></div>
<div class="center-container">
<div class="fire-text">知火AI</div>
<div class="sparks">
<div class="spark" style="left:20%; top:50%; animation-delay:0.2s;"></div>
<div class="spark" style="left:40%; top:50%; animation-delay:0.5s;"></div>
<div class="spark" style="left:60%; top:50%; animation-delay:0.8s;"></div>
<div class="spark" style="left:80%; top:50%; animation-delay:1.1s;"></div>
</div>
</div>
</body>
</html>
```
### 效果说明：
1. **旋涡银河**：
- 采用您提供的旋涡样式（需替换背景图链接）
- 30秒逆时针旋转一周
- 6秒淡入淡出循环，实现“时隐时现”
2. **火焰描边文字**：
- 10px宽度火焰描边，颜色在橙红/亮红/亮黄间循环
- 文字大小160px（适当适配屏幕）
- 固定居中显示，不随银河旋转
3. **火星飞溅**：
- 4个火星从文字底部向上飞溅
- 轨迹带旋转+渐隐效果，周期2.5秒
### 替换提示：
将代码中`background: url('https://i.imgur.com/your-galaxy-image.png')`替换为您提供的银河图的实际链接（可先保存图片后获取链接）。
要不要我帮您调整文字大小或火星飞溅的密度。
我要赚赏金
STM32
MCU
通讯及无线技术
物联网技术
电子DIY
板卡试用
基础知识
软件与操作系统
我爱生活
小e食堂
