console
<!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
}
html,body{
width:100%;
height:100%;
overflow:hidden;
background:#000;
position:relative;
}
.birth-bg{
position:fixed;
inset:0;
width:100vw;
height:100vh;
z-index:0;
pointer-events:none;
}
.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,
0 0 25px rgba(255,107,129,.6);
animation: fall linear forwards;
z-index:1;
}
@keyframes fall{
0%{
transform: translateY(-50px);
opacity:1
}
100%{
transform: translateY(110vh);
opacity:0
}
}
</style>
</head>
<body>
<svg class="birth-bg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1700 960">
<!--星星-->
<path fill="#ffb8d0" d="M40,60 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#ffdd55" d="M410,145 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#64e078" d="M590,105 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#b880e8" d="M140,225 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#ffdd55" d="M405,380 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#64e078" d="M50,570 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#ffb8d0" d="M80,655 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#ffb8d0" d="M870,310 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#b880e8" d="M1100,210 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#ffdd55" d="M1540,330 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#64e078" d="M1460,80 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#61d9ec" d="M1640,730 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#ffdd55" d="M1560,700 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#b880e8" d="M1545,460 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#ffb8d0" d="M1520,900 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<path fill="#ff6b81" d="M265,860 l5,12 h14 l-11,8 l4,13 l-12,-8 l-12,8 l4,-13 l-11,-8 h14z"/>
<!--彩带曲线-->
<path stroke="#61b8ec" stroke-width="8" fill="none" stroke-linecap="round" d="M220,270 C 280,210 320,240 300,200"/>
<path stroke="#ff6b55" stroke-width="8" fill="none" stroke-linecap="round" d="M200,470 C 170,370 240,330 270,340"/>
<path stroke="#64e078" stroke-width="8" fill="none" stroke-linecap="round" d="M220,810 C 290,770 330,820 300,840"/>
<path stroke="#ff98d4" stroke-width="8" fill="none" stroke-linecap="round" d="M1240,830 C1320,800 1360,840 1340,860"/>
<path stroke="#ff6b55" stroke-width="8" fill="none" stroke-linecap="round" d="M1420,540 C1470,640 1430,720 1370,750"/>
<!--糖果-->
<ellipse cx="500" cy="370" rx="70" ry="40" fill="#b880e8"/>
<ellipse cx="440" cy="440" rx="70" ry="40" fill="#61b8ec"/>
<!--派对帽子-->
<polygon points="780,310 720,470 840,470" fill="#ff7766"/>
<line x1="720" y1="370" x2="840" y2="370" stroke="#fff" stroke-width="8"/>
<!--气球组-->
<ellipse cx="1230" cy="190" rx="85" ry="75" fill="#ffdd55"/>
<ellipse cx="1330" cy="125" rx="85" ry="75" fill="#64e078"/>
<ellipse cx="1405" cy="240" rx="85" ry="75" fill="#ff9855"/>
<ellipse cx="1140" cy="330" rx="85" ry="75" fill="#61b8ec"/>
<ellipse cx="1325" cy="280" rx="85" ry="75" fill="#ffb8d0"/>
<ellipse cx="1350" cy="390" rx="85" ry="75" fill="#c998f0"/>
<path stroke="#775544" stroke-width="4" fill="none" d="M1230,265 C1240,400 1320,400 1330,460"/>
<!--烟花-->
<g transform="translate(140,730)">
<line x1="0" y1="0" x2="-80" y2="-90" stroke="#ffdd55" stroke-width="4"/>
<line x1="0" y1="0" x2="80" y2="-90" stroke="#ff6b81" stroke-width="4"/>
<line x1="0" y1="0" x2="-95" y2="-20" stroke="#61b8ec" stroke-width="4"/>
<line x1="0" y1="0" x2="95" y2="-20" stroke="#b880e8" stroke-width="4"/>
<line x1="0" y1="0" x2="-60" y2="70" stroke="#64e078" stroke-width="4"/>
<line x1="0" y1="0" x2="60" y2="70" stroke="#ff9855" stroke-width="4"/>
</g>
<!--礼物盒-->
<rect x="1090" y="710" width="75" height="70" rx="6" fill="#ffcc33"/>
<line x1="1127" y1="710" x2="1127" y2="780" stroke="#dd8822" stroke-width="6"/>
<line x1="1090" y1="745" x2="1165" y2="745" stroke="#dd8822" stroke-width="6"/>
<!--生日快乐大字-->
<text x="850" y="560" text-anchor="middle" font-size="220" font-weight="bold" fill="#ffffff" stroke="#ffb8d0" stroke-width="4">生日快乐</text>
<text x="850" y="720" text-anchor="middle" font-size="90" fill="#ffffff" font-style="italic">Happy Birthday</text>
</svg>
<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);
// 一键全屏按钮逻辑
function toggleFull(){
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
document.body.onclick = toggleFull;
</script>
</body>
</html>