```
新年快乐动画
/* 一般主体样式 */
正文 {
溢出：隐藏；
边距: 0;
背景：黑色；
}<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>
登录后复制
// 有延迟的字符
const 行 = [
{ id: “line1”, text: “happy”; },
{ id：“第 2 行”，文本：“新”； },
{ id：“第 3 行”，文本：“年份”； }
];<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>
登录后复制
登录后复制
以上就是使用 html css 和 js 的新年快乐动画的详细内容，更多请关注php中文网其它相关文章！