```<!doctype html>
新年快乐动画
<br> /* 一般主体样式 */<br> 正文 {<br> 溢出：隐藏；<br> 边距: 0;<br> 背景：黑色；<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>/* 文本容器 */ 。线 { 显示：柔性； 调整内容：居中； 对齐项目：居中； 边距：10 像素； 位置：相对； z 索引：10； } /* 角色动画 */ .char { 显示：内联块； 字体大小：4rem； 字体粗细：粗体； 边距：5 像素； 不透明度：0； 变换：translatey(50px) 缩放(0.5)； 动画：向前出现1秒，发光1.5秒无限交替； } @关键帧出现{ 从 { 不透明度：0； 变换：translatey(50px) 缩放(0.5)； } 到 { 不透明度：1； 变换：translatey(0) 缩放(1)； } } @关键帧发光{ 从 { 文本阴影：0 0 10px #fff，0 0 20px #ff007f，0 0 30px #7b2cbf； } 到 { 文本阴影：0 0 20px #fff，0 0 40px #00b4d8，0 0 50px #ffcc00； } } /* 向上鞭炮效果 */ .烟火{ 位置：绝对； 宽度：4px； 高度：4px； 背景：hsl(0, 100%, 50%); 边界半径：50%； 框阴影: 0 0 10px hsl(0, 100%, 50%); 动画：向前播放 1 秒的缓出； } @关键帧拍摄{ 0% { 变换：translatey(0) 缩放(0.5)； 不透明度：1； } 100% { 变换：translatey(-300px) 缩放(1.5)； 不透明度：0； } } /* 爆炸效果 */ .spark{ 位置：绝对； 宽度：6 像素； 高度：6 像素； 边界半径：50%； 背景：hsl(0, 100%, 50%); 框阴影: 0 0 10px hsl(0, 100%, 50%); 动画：向前爆炸 1.2 秒缓出； } @关键帧爆炸{ 0% { 变换： 平移y(0) 平移x(0) 缩放(0.5)； 不透明度：1； } 100% { 变换：translatey(calc(-50px (100px * var(--y-dir)))) 翻译x（计算（-50px （100px * var（--x-dir）））） 规模（1.5）； 不透明度：0； } } </code></pre></div> <p>
<!-- 文本行 -->
<!--烟花容器-->
<br>
// 有延迟的字符<br>
const 行 = [<br>
{ id: “line1”, text: “happy”; },<br>
{ id：“第 2 行”，文本：“新”； },<br>
{ id：“第 3 行”，文本：“年份”； }<br>
];</p>
<div class="高亮"><pre class="高亮明文"><code>let 延迟 = 0;
函数 shotfirework(x, y, 回调) {
const firework = document.createelement('div');
firework.classname = '烟花';
firework.style.left = `${x}px`;
firework.style.top = `${y}px`;
firework.style.background = `hsl(${math.random() * 360}, 100%, 50%)`;
firework.style.boxshadow = `0 0 10px hsl(${math.random() * 360}, 100%, 50%)`;
document.body.appendchild(烟花);
settimeout(() => {
烟花.remove();
回调（x，y）；
}, 1000); // 烟花持续时间
}
函数explodefirework(x, y) {
for (令 i = 0; i spark.remove(), 1200); // 火花持续时间
}
}
函数revealcharacter（字符，容器，延迟）{
const span = document.createelement('span');
span.classname = 'char';
span.textcontent = char;
span.style.animationdelay = `${delay}s`;
span.style.color = `hsl(${math.random() * 360},
100%, 70%)`;
容器.appendchild(span);
}
lines.foreach((行，索引) => {
const 容器 = document.getelementbyid(line.id);
line.text.split('').foreach((char, i) => {
const x = window.innerwidth / 2 i * 50 - (line.text.length * 25);
const y = window.innerheight;
settimeout(() => {
shotfirework(x, y, () => {
爆炸烟火（x，y）；
revealcharacter(字符, 容器, 0);
});
}, 延迟 * 1000);
延迟 = 1； // 每个角色烟花之间的延迟
});
延迟 = 1； // 线路之间的额外延迟
});
</code></pre></div>
<p>
