```
新年快乐动画
/* 一般主体样式 */
正文 {
溢出：隐藏；
边距: 0;
背景：黑色；
}
/* 文本容器 */
。线 {
显示：柔性；
调整内容：居中；
对齐项目：居中；
边距：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；
}
}
新年快乐主题活动卡设计ps素材下载
下载
新年快乐主题活动卡设计ps素材适用于新年快乐活动卡片设计 本作品提供新年快乐主题活动卡设计ps素材的图片会员免费下载，格式为PSD，文件大小为7.0M； 请使用软件Photoshop进行编辑，作品中文字及图均可以通过软件修改和编辑；
// 有延迟的字符
const 行 = [
{ id: “line1”, text: “happy”; },
{ id：“第 2 行”，文本：“新”； },
{ id：“第 3 行”，文本：“年份”； }
];
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 < 15; i ) {
const spark = document.createelement('div');
spark.classname = 'spark';
spark.style.left = `${x}px`;
spark.style.top = `${y - 300}px`;
spark.style.background = `hsl(${math.random() * 360}, 100%, 50%)`;
spark.style.boxshadow = `0 0 10px hsl(${math.random() * 360}, 100%, 50%)`;
spark.style.setproperty('--x-dir', math.random());
spark.style.setproperty('--y-dir', math.random());
document.body.appendchild(spark);
settimeout(() => 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； // 线路之间的额外延迟
});
