# 完整修改代码：新增结束滴声电子音效，**顺时针旋转缩小远去，全部流程保留
新增内容：
1. 结束提示音 `<audio id="beepEnd">`
2. **动画结束后先播放“滴”一声，再执行画面淡出黑屏
3. **动画：顺时针旋转+持续缩小越旋越远
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>知火AI **顺时针越旋越远版</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
width:100vw;
height:100vh;
overflow:hidden;
background:#000;
position:relative;
}
/* 滚动代码面板 自下而上滚动一次 */
.code-scroll-box{
position:absolute;
width:92%;
max-width:1100px;
left:50%;
top:100%;
transform:translateX(-50%);
padding:24px;
color:#39ff14;
font-family:Consolas,Monaco,monospace;
font-size:13px;
white-space:pre-wrap;
z-index:999;
background:rgba(0,0,0,0.94);
border:1px solid #ff5000;
border-radius:10px;
animation:codeSlideUp 14s linear forwards;
}
@keyframes codeSlideUp{
0%{top:100%;opacity:0;}
8%{opacity:1;}
92%{opacity:1;}
100%{top:-130%;opacity:0;pointer-events:none;}
}
/* **系：顺时针旋转+持续缩小越旋越远 */
.galaxy{
position:absolute;
width:78%;
height:78%;
left:50%;
top:46%;
transform:translate(-50%,-50%);
background:url('https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rns2rl98/3100139389944049941140090043900') center/contain no-repeat;
/* 顺时针旋转+缩放远去 + 明暗呼吸 */
animation:rotateZoom 10s linear forwards, fadeShow 4s ease-in-out infinite alternate;
z-index:1;
opacity:0;
will-change: transform;
}
/* 关键帧：顺时针旋转360度 + 缩小到0.2倍，模拟越旋越远 */
@keyframes rotateZoom{
0%{transform:translate(-50%,-50%) rotate(0deg) scale(1);}
100%{transform:translate(-50%,-50%) rotate(360deg) scale(0.2);}
}
@keyframes fadeShow{
0%{opacity:0.72;}
100%{opacity:1;}
}
/* 文字容器，代码滚动完成后淡入 */
.text-box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:10;
opacity:0;
animation:textFadeIn 1s ease forwards;
animation-delay:14s;
}
@keyframes textFadeIn{
to{opacity:1;}
}
/* 火焰描边 */
.fire-outline{
position:absolute;
width:100%;
height:100%;
font-size:130px;
font-weight:900;
font-family:"黑体",sans-serif;
text-align:center;
color:transparent;
-webkit-text-stroke:4px #ff4400;
filter:drop-shadow(0 0 15px #ff6622) drop-shadow(0 0 30px #ff2000) drop-shadow(0 0 50px #ff0000);
animation:fireFlick 1.3s ease-in-out infinite alternate;
}
.title{
font-size:130px;
font-weight:900;
font-family:"黑体",sans-serif;
text-align:center;
color:#000000;
position:relative;
z-index:2;
}
/* 火星飞溅 */
.spark-wrap{
position:absolute;
inset:-40%;
pointer-events:none;
z-index:15;
}
.spark{
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:radial-gradient(#fff,#ffdd00,#ff3300);
box-shadow:0 0 12px #ff9900,0 0 25px #ff2200;
animation:sparkFly 2.5s linear infinite;
}
@keyframes fireFlick{
0%{opacity:0.8;filter:drop-shadow(0 0 12px #ff6600) drop-shadow(0 0 24px #ff2200);}
100%{opacity:1;filter:drop-shadow(0 0 18px #ff7722) drop-shadow(0 0 36px #ff1100);}
}
@keyframes sparkFly{
0%{transform:translate(0,0) scale(1);opacity:0;}
20%{opacity:1;}
100%{transform:translate(var(--tx),var(--ty)) scale(0.1);opacity:0;}
}
/* 全局淡出黑屏 */
.all-fade-out{
animation:fullBlack 1.5s ease forwards;
}
@keyframes fullBlack{
to{opacity:0;pointer-events:none;}
}
</style>
</head>
<body>
<!-- 滚动代码文本 -->
<div class="code-scroll-box"><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>知火AI 魂斗罗音画时序版</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{
width:100vw;
height:100vh;
overflow:hidden;
background:#000;
position:relative;
}
.galaxy{
position:absolute;
width:78%;
height:78%;
left:50%;
top:46%;
transform:translate(-50%,-50%);
background:url('**图链接') center/contain no-repeat;
animation:rotateZoom 10s linear forwards, fadeShow 4s ease-in-out infinite alternate;
z-index:1;
opacity:0;
will-change: transform;
}
.text-box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:10;
}
.fire-outline{
position:absolute;
width:100%;
height:100%;
font-size:130px;
font-weight:900;
font-family:"黑体",sans-serif;
text-align:center;
color:transparent;
-webkit-text-stroke:4px #ff4400;
filter:drop-shadow(0 0 15px #ff6622) drop-shadow(0 0 30px #ff2000) drop-shadow(0 0 50px #ff0000);
animation:fireFlick 1.3s ease-in-out infinite alternate;
}
.title{
font-size:130px;
font-weight:900;
font-family:"黑体",sans-serif;
text-align:center;
color:#000000;
position:relative;
z-index:2;
}
.spark-wrap{
position:absolute;
inset:-40%;
pointer-events:none;
z-index:15;
}
.spark{
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:radial-gradient(#fff,#ffdd00,#ff3300);
box-shadow:0 0 12px #ff9900,0 0 25px #ff2200;
animation:sparkFly 2.5s linear infinite;
}
@keyframes rotateZoom{
0%{transform:translate(-50%,-50%) rotate(0deg) scale(1);}
100%{transform:translate(-50%,-50%) rotate(360deg) scale(0.2);}
}
@keyframes fadeShow{
0%{opacity:0.72;}
100%{opacity:1;}
}
@keyframes fireFlick{
0%{opacity:0.8;filter:drop-shadow(0 0 12px #ff6600) drop-shadow(0 0 24px #ff2200);}
100%{opacity:1;filter:drop-shadow(0 0 18px #ff7722) drop-shadow(0 0 36px #ff1100);}
}
@keyframes sparkFly{
0%{transform:translate(0,0) scale(1);opacity:0;}
20%{opacity:1;}
100%{transform:translate(var(--tx),var(--ty)) scale(0.1);opacity:0;}
}
</style>
</head>
<body>
<div class="galaxy" id="galaxyDom"></div>
<div class="text-box" id="textWrap">
<div class="fire-outline">知火AI</div>
<div class="title">知火AI</div>
<div class="spark-wrap" id="sparkContainer"></div>
</div>
<audio id="audioMain" preload="auto">
<source src="contra-8bit.mp3" type="audio/mpeg">
</audio>
<script>
const sparkBox = document.getElementById('sparkContainer');
const audio = document.getElementById('audioMain');
const galaxy = document.getElementById('galaxyDom');
const textWrap = document.getElementById('textWrap');
const allDom = document.querySelectorAll('.galaxy, .text-box');
function createSpark(){
const s = document.createElement('div');
s.className = 'spark';
const x = Math.random() * 100 + '%';
const y = Math.random() * 100 + '%';
const offsetX = (Math.random() - 0.5) * 220;
const offsetY = -Math.random() * 150 - 40;
s.style.left = x;
s.style.top = y;
s.style.setProperty('--tx', offsetX + 'px');
s.style.setProperty('--ty', offsetY + 'px');
s.style.animationDelay = Math.random() * 0.7 + 's';
sparkBox.appendChild(s);
setTimeout(()=>s.remove(),2700);
}
setInterval(createSpark,80);
window.onload = ()=>{
setTimeout(()=>{
audio.play().catch(err=>console.log('浏览器需交互后播放音频：',err));
galaxy.style.opacity = 1;
}, 3000);
}
audio.addEventListener('ended', ()=>{
allDom.forEach(dom=>dom.classList.add('all-fade-out'));
});
</script>
</body>
</html></div>
<!-- **背景 -->
<div class="galaxy" id="galaxyDom"></div>
<!-- 中心火焰文字 -->
<div class="text-box" id="textWrap">
<div class="fire-outline">知火AI</div>
<div class="title">知火AI</div>
<div class="spark-wrap" id="sparkContainer"></div>
</div>
<!-- 音效1：键盘打字音效 -->
<audio id="typeSound" loop preload="auto">
<source src="keyboard-type.mp3" type="audio/mpeg">
<!-- 音效2：魂斗罗8bit红白机主题曲 -->
<audio id="audioMain" preload="auto">
<source src="contra-8bit.mp3" type="audio/mpeg">
<!-- 新增：结束滴一声提示音 -->
<audio id="beepEnd" preload="auto">
<source src="beep-end.mp3" type="audio/mpeg">
<script>
const sparkBox = document.getElementById('sparkContainer');
const audio = document.getElementById('audioMain');
const galaxy = document.getElementById('galaxyDom');
const textWrap = document.getElementById('textWrap');
const typeAudio = document.getElementById('typeSound');
const beepAudio = document.getElementById('beepEnd');
const allDom = document.querySelectorAll('.galaxy, .text-box');
// 火星粒子生成
function createSpark(){
const s = document.createElement('div');
s.className = 'spark';
const x = Math.random() * 100 + '%';
const y = Math.random() * 100 + '%';
const offsetX = (Math.random() - 0.5) * 220;
const offsetY = -Math.random() * 150 - 40;
s.style.left = x;
s.style.top = y;
s.style.setProperty('--tx', offsetX + 'px');
s.style.setProperty('--ty', offsetY + 'px');
s.style.animationDelay = Math.random() * 0.7 + 's';
sparkBox.appendChild(s);
setTimeout(()=>s.remove(),2700);
}
setInterval(createSpark,80);
window.onload = ()=>{
// 0秒启动打字音效
typeAudio.volume = 0.4;
typeAudio.play().catch(e=>console.log("点击页面后音效生效",e));
// 14秒 代码滚动结束，关闭打字音效
setTimeout(()=>{
typeAudio.pause();
typeAudio.currentTime = 0;
},14000);
// 17秒 火焰文字稳定3秒后，播放魂斗罗音乐、淡入**
setTimeout(()=>{
audio.volume = 0.8;
audio.play().catch(err=>console.log('浏览器需交互后播放音频：',err));
galaxy.style.opacity = 1;
}, 17000);
// 27秒：**旋转缩放10秒完成，先播放滴声，再黑屏淡出
setTimeout(()=>{
audio.pause();
audio.currentTime = 0;
// 播放结束滴音效
beepAudio.volume = 0.7;
beepAudio.play().catch(e=>{});
// 滴声后执行画面淡出黑屏
setTimeout(()=>{
allDom.forEach(dom=>dom.classList.add('all-fade-out'));
}, 300);
}, 27000);
}
</script>
</body>
</html>
```
## 时序说明
1. 0~14s：代码自下向上滚动 + 键盘打字音效
2. 14~17s：代码消失，显示知火AI火焰文字+飞溅火星（静音）
3. 17~27s：魂斗罗8bit红白机BGM播放，**顺时针旋转+持续缩小越旋越远
4. 27s：魂斗罗音乐停止，立刻播放短促“滴”电子音效
5. 滴声等待0.3秒后，所有画面平滑淡出，最终纯黑屏幕
## 音频文件配置
- `keyboard-type.mp3`：键盘打字音效
- `contra-8bit.mp3`：红白机魂斗罗主题曲
- `beep-end.mp3`：短促滴一声结束提示音（搜索“电子滴声 提示音”下载）
全部音频文件和html放在同一文件夹使用。
|
|
