1. 新建一个txt文档
2. 将以下代码复制粘贴到你新建的txt文档里面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025跨年烟花秀</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #000;
color: #fff;
font-family: Arial, sans-serif;
background-image: url('https://i-blog.csdnimg.cn/blog_migrate/ed8fb82abfae7eb87bd67b552d86990f.gif#pic_center');
background-size: cover;
background-position: center;
}
#snow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.snowflake {
position: absolute;
color: #fff;
font-size: 20px;
user-select: none;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
#fireworks {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
background: #ff0;
border-radius: 50%;
animation: explode 1.5s ease-out forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(10);
opacity: 0;
}
}
#greeting {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
text-align: center;
color: #fff;
text-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid #fff;
width: 0;
animation: typing 4s steps(12, end) forwards, blink-caret 0.75s step-end infinite;
}
@keyframes typing {
to {
width: 12em; /* 根据文字长度调整 */
}
}
@keyframes blink-caret {
from, to {
border-color: transparent;
}
50% {
border-color: #fff;
}
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div id="snow"></div>
<div id="fireworks"></div>
<div id="greeting"></div>
<script>
// 雪花效果
const snowContainer = document.getElementById('snow');
const snowflakeCount = 50;
for (let i = 0; i < snowflakeCount; i++) {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄';
snowflake.style.left = `${Math.random() * 100}vw`;
snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`;
snowflake.style.animationDelay = `${Math.random() * 2}s`;
snowContainer.appendChild(snowflake);
}
// 烟花效果
const fireworksContainer = document.getElementById('fireworks');
function createFirework() {
const firework = document.createElement('div');
firework.classList.add('firework');
firework.style.left = `${Math.random() * 100}vw`;
firework.style.top = `${Math.random() * 100}vh`;
firework.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
fireworksContainer.appendChild(firework);
// 创建烟花粒子
const particleCount = 50; // 增加粒子数量
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('firework');
particle.style.left = firework.style.left;
particle.style.top = firework.style.top;
particle.style.backgroundColor = firework.style.backgroundColor;
particle.style.animationDuration = `${Math.random() * 1 + 0.5}s`;
particle.style.transform = `translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px)`;
fireworksContainer.appendChild(particle);
setTimeout(() => {
particle.remove();
}, 1500);
}
setTimeout(() => {
firework.remove();
}, 1500);
}
setInterval(createFirework, 100); // 提高烟花生成频率
// 文字逐字打印效果
const greeting = document.getElementById('greeting');
const text = "你好，2025！新年快乐";
let index = 0;
function typeWriter() {
if (index < text.length) {
greeting.innerHTML += text.charAt(index);
index++;
setTimeout(typeWriter, 200); // 控制打印速度
} else {
setTimeout(() => {
greeting.style.animation = 'fadeOut 1s forwards'; // 文字消失效果
}, 2000); // 打印完成后等待2秒再消失
}
}
typeWriter();
</script>
</body>
</html>
3. 把你新建的文本文档后缀由.txt 改为 .html
4. 双击打开 1.html
5. 效果展示
最后在这里祝大家2025年新年快乐啦
标签：style,const,particle,random,烟花,动态效果,firework,跨年,Math From： https://blog.csdn.net/weixin_73355042/article/details/144856764