SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>生日祝福</title>
<style>
*{
  margin:0;
  padding:0;
  box-sizing:border-box
}

body{
  overflow:hidden;
  width:100vw;
  height:100vh;
  background: url("birthday_bg.jpg") center / cover no-repeat;
  background-color:#000;
}

.item{
  position:absolute;
  top:-50px;
  color:#fff;
  font-weight:bold;
  white-space:nowrap;
  text-shadow:
    0 0 5px #000,
    0 0 10px #000,
    0 0 15px #ff6b81;
  animation: fall linear forwards;
}

@keyframes fall{
  0%{
    transform: translateY(-50px);
    opacity:1
  }
  100%{
    transform: translateY(110vh);
    opacity:0
  }
}
</style>
</head>
<body>

<script>
const textList = [
"小欣 生日快乐",
"小欣 平安喜乐",
"小欣 万事顺意",
"小欣 天天开心",
"小欣 岁岁无忧",
"小欣 被爱包围",
"小欣 好运常在",
"小欣 永远开心",
"小欣 闪闪发光",
"小欣 所愿皆成",
"小欣 岁岁欢喜",
"小欣 诸事顺遂",
"小欣 喜乐长安",
"小欣 自在随心",
"小欣 无忧无虑",
"小欣 福气满满",
"小欣 前程似锦",
"小欣 温柔常在",
"小欣 好运爆棚",
"小欣 平安安康",
"小欣 日子甜甜",
"小欣 眼里有光",
"小欣 心中有爱",
"小欣 一路向阳",
"小欣 乘风破浪",
"小欣 所得皆甜",
"小欣 不负热爱",
"小欣 笑口常开",
"小欣 岁岁安康",
"小欣 无忧无虑",
"小欣 吉星高照",
"小欣 顺风顺水",
"小欣 无病无灾",
"小欣 温柔顺遂",
"小欣 浪漫常伴",
"小欣 美好如期",
"小欣 来日可期",
"小欣 繁花相伴",
"小欣 自在安然",
"小欣 满心欢喜",
"小欣 岁岁常欢愉",
"小欣 年年皆胜意",
"小欣 保持热爱",
"小欣 奔赴山海",
"小欣 快乐常驻",
"小欣 好运连连",
"小欣 幸福绵长",
"小欣 温柔以待",
"小欣 岁岁平安",
"小欣 喜乐无忧",
"小欣 万事无忧",
"小欣 向阳而生",
"小欣 好运如约",
"小欣 幸福常在",
"小欣 好梦常圆",
"小欣 喜乐相伴",
"小欣 岁岁温柔",
"小欣 万事称心",
"小欣 福气常伴",
"小欣 无忧无虑",
"小欣 前程坦荡",
"小欣 光芒万丈",
"小欣 岁岁甜蜜",
"小欣 温暖如初",
"小欣 平安顺遂",
"小欣 欢喜常在",
"小欣 岁岁晴朗",
"小欣 自在快乐",
"小欣 甜甜蜜蜜",
"小欣 好事发生",
"小欣 好运不停",
"小欣 被温柔善待",
"小欣 永远明媚",
"小欣 万事如愿",
"小欣 平安喜乐",
"小欣 年年欢喜",
"小欣 无忧无愁",
"小欣 一路生花",
"小欣 温柔闪光",
"小欣 幸福无忧",
"小欣 岁岁有甜",
"小欣 心想事成",
"小欣 快乐加倍",
"小欣 岁岁长安",
"小欣 喜乐多多",
"小欣 日子闪亮",
"小欣 美好相伴",
"小欣 好运永随",
"小欣 平安常伴",
"小欣 自在欢喜",
"小欣 所遇皆善",
"小欣 所行皆坦途",
"小欣 永远热烈",
"小欣 浪漫永存",
"小欣 岁岁常甜",
"小欣 福气多多",
"小欣 岁岁无忧愁",
"小欣 天天有惊喜",
"小欣 平安又开心",
"小欣 生日快乐呀"
];

const colors = [
  "#ff6b81",
  "#ffd700",
  "#4cd137",
  "#00d2d3",
  "#ff9ff3",
  "#ffffff",
  "#ffa502"
];

function create(){
  const el = document.createElement("div");
  el.className = "item";
  el.innerText = textList[Math.floor(Math.random() * textList.length)];
  el.style.left = Math.random() * 85 + "vw";
  el.style.color = colors[Math.floor(Math.random() * colors.length)];
  el.style.fontSize = (Math.random() * 18 + 18) + "px";

  const duration = Math.random() * 3 + 4;
  el.style.animationDuration = duration + "s";

  document.body.appendChild(el);
  setTimeout(() => el.remove(), duration * 1000);
}

setInterval(create, 280);
</script>

</body>
</html>