首页 > 文章 > 前端

使用 html css 和 js 的新年快乐动画

来源：dev.to

时间：2025-01-14 15:42:45 391浏览收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《使用 html css 和 js 的新年快乐动画》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

```

新年快乐动画

/* 一般主体样式 */
正文 {
溢出：隐藏；
边距: 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；
  }
}

// 有延迟的字符
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  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； // 线路之间的额外延迟
});

理论要掌握，实操不能落！以上关于《使用 html css 和 js 的新年快乐动画》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除