简单快捷 - 纯CSS与HTML特效
这个方案非常适合快速搭建一个充满节日气氛的页面，无需JavaScript,加载速度快。
（图片来源网络，侵删）
特点：
- 红色与金色的经典配色。
- 飘落的雪花动画。
- 闪烁的霓虹灯文字效果。
- 烟花粒子效果。
代码：
您可以直接将以下代码保存为一个 .html 文件,然后在浏览器中打开。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新年快乐</title>
<style>
/* 基础样式 */
body {
margin: 0;
padding: 0;
height: 100vh;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif;
overflow: hidden; /* 防止滚动条 */
}
/* 主标题样式 */
.greeting {
font-size: 5rem;
font-weight: bold;
color: #fff;
text-align: center;
text-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #e60073,
0 0 40px #e60073,
0 0 50px #e60073,
0 0 60px #e60073,
0 0 70px #e60073;
animation: neon-flicker 1.5s infinite alternate;
}
/* 霓虹灯闪烁动画 */
@keyframes neon-flicker {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
/* 雪花容器 */
.snowflakes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 雪花不阻挡鼠标事件 */
z-index: -1; /* 确保在内容下方 */
}
/* 单个雪花样式 */
.snowflake {
position: absolute;
top: -10px;
color: #fff;
font-size: 1em;
animation: fall linear infinite;
opacity: 0.8;
}
/* 雪花飘落动画 */
@keyframes fall {
to {
transform: translateY(100vh);
}
}
/* 烟花效果容器 */
.fireworks {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.firework {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty));
opacity: 0;
}
}
</style>
</head>
<body>
<h1 class="greeting">新年快乐</h1>
<!-- 雪花容器 -->
<div class="snowflakes" id="snowflakes"></div>
<!-- 烟花容器 -->
<div class="fireworks" id="fireworks"></div>
<script>
// 雪花效果
function createSnowflakes() {
const snowflakesContainer = document.getElementById('snowflakes');
const snowflakeSymbols = ['❄', '❅', '❆'];
function addSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
snowflake.style.left = Math.random() * 100 + 'vw';
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // 2-5秒
snowflake.style.opacity = Math.random();
snowflake.style.fontSize = Math.random() * 10 + 10 + 'px'; // 10-20px
snowflakesContainer.appendChild(snowflake);
// 动画结束后移除元素，避免内存泄漏
setTimeout(() => {
snowflake.remove();
}, 5000);
}
// 每200毫秒创建一片雪花
setInterval(addSnowflake, 200);
}
// 烟花效果
function createFirework() {
const fireworksContainer = document.getElementById('fireworks');
const colors = ['#ff0000', '#ffa500', '#ffff00', '#00ff00', '#0000ff', '#ff00ff', '#ffffff'];
const firework = document.createElement('div');
firework.classList.add('firework');
firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
firework.style.left = Math.random() * 100 + 'vw';
firework.style.top = Math.random() * 100 + 'vh';
// 为每个粒子设置随机的爆炸方向
const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('firework');
particle.style.backgroundColor = firework.style.backgroundColor;
particle.style.left = '0';
particle.style.top = '0';
const angle = (360 / particleCount) * i;
const velocity = 50 + Math.random() * 50;
const tx = Math.cos(angle * Math.PI / 180) * velocity;
const ty = Math.sin(angle * Math.PI / 180) * velocity;
particle.style.setProperty('--tx', tx + 'px');
particle.style.setProperty('--ty', ty + 'px');
firework.appendChild(particle);
}
fireworksContainer.appendChild(firework);
// 烟花动画结束后移除
setTimeout(() => {
firework.remove();
}, 1000);
}
// 启动动画
createSnowflakes();
// 每隔1.5秒放一个烟花
setInterval(createFirework, 1500);
</script>
</body>
</html>
进阶交互 - Canvas粒子烟花
这个方案使用HTML5 Canvas来绘制更加逼真和绚烂的烟花效果，性能更好,视觉效果更震撼。
特点：
（图片来源网络，侵删）
- 使用Canvas绘制,性能优异。
- 真实的烟花物理效果（重力、速度、衰减）。
- 点击屏幕可以手动发射烟花。
- 自动和手动发射相结合。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新年快乐 - Canvas烟花</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
canvas {
display: block;
cursor: crosshair;
}
.greeting {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 4rem;
font-weight: bold;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
pointer-events: none; /* 让鼠标事件穿透 */
z-index: 10;
}
</style>
</head>
<body>
<h1 class="greeting">新年快乐</h1>
<canvas id="fireworksCanvas"></canvas>
<script>
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
// 设置Canvas大小为窗口大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 烟花和粒子数组
let fireworks = [];
let particles = [];
// 随机颜色
const colors = ['#ff0000', '#ffa500', '#ffff00', '#00ff00', '#00ffff', '#ff00ff', '#ffffff'];
// 烟花类
class Firework {
constructor(x, y, targetX, targetY) {
this.x = x;
this.y = y;
this.targetX = targetX;
this.targetY = targetY;
this.speed = 2;
this.angle = Math.atan2(targetY - y, targetX - x);
this.velocity = {
x: Math.cos(this.angle) * this.speed,
y: Math.sin(this.angle) * this.speed
};
this.brightness = Math.random() * 50 + 50;
this.targetRadius = 1;
}
update() {
this.x += this.velocity.x;
this.y += this.velocity.y;
// 检查是否到达目标点
const distanceToTarget = Math.sqrt(Math.pow(this.targetX - this.x, 2) + Math.pow(this.targetY - this.y, 2));
if (distanceToTarget < 10) {
this.explode();
return true; // 标记为需要移除
}
return false;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.targetRadius, 0, Math.PI * 2);
ctx.fillStyle = `hsl(0, 100%, ${this.brightness}%)`;
ctx.fill();
ctx.closePath();
}
explode() {
const particleCount = 100;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle(this.targetX, this.targetY, colors[Math.floor(Math.random() * colors.length)]));
}
}
}
// 粒子类
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.velocity = {
x: (Math.random() - 0.5) * 8,
y: (Math.random() - 0.5) * 8
};
this.alpha = 1;
this.decay = Math.random() * 0.02 + 0.005;
this.gravity = 0.1;
}
update() {
this.velocity.y += this.gravity;
this.x += this.velocity.x;
this.y += this.velocity.y;
this.alpha -= this.decay;
return this.alpha <= 0; // 标记为需要移除
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
ctx.restore();
}
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 使用半透明黑色填充，实现拖尾效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新和绘制烟花
for (let i = fireworks.length - 1; i >= 0; i--) {
if (fireworks[i].update()) {
fireworks.splice(i, 1);
} else {
fireworks[i].draw();
}
}
// 更新和绘制粒子
for (let i = particles.length - 1; i >= 0; i--) {
if (particles[i].update()) {
particles.splice(i, 1);
} else {
particles[i].draw();
}
}
}
// 自动发射烟花
function launchRandomFirework() {
const startX = Math.random() * canvas.width;
const startY = canvas.height;
const targetX = Math.random() * canvas.width;
const targetY = Math.random() * canvas.height * 0.5;
fireworks.push(new Firework(startX, startY, targetX, targetY));
}
// 每800毫秒自动发射一个
setInterval(launchRandomFirework, 800);
// 点击屏幕发射烟花
canvas.addEventListener('click', (e) => {
const startX = Math.random() * canvas.width;
const startY = canvas.height;
fireworks.push(new Firework(startX, startY, e.clientX, e.clientY));
});
// 启动动画
animate();
</script>
</body>
</html>
高级炫酷 - Three.js 3D烟花
这个方案使用Three.js库来创建一个3D场景，烟花在三维空间中爆炸,效果极其震撼。
特点：
- 真实的3D空间感和深度感。
- 可以自由旋转视角。
- 粒子系统效果出色。
- 代码相对复杂,需要引入外部库。
准备工作：
（图片来源网络，侵删）
- 从 Three.js官网 下载库文件,或使用CDN链接。
- 将以下代码保存为
.html文件，并确保Three.js文件路径正确。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新年快乐 - 3D烟花</title>
<style>
body { margin: 0; }
canvas { display: block; }
.greeting {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 4rem;
font-weight: bold;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
pointer-events: none;
z-index: 10;
}
</style>
</head>
<body>
<h1 class="greeting">新年快乐</h1>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.158.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'https://unpkg.com/three@0.158.0/examples/jsm/controls/OrbitControls.js';
// 场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加轨道控制器，可以旋转和缩放视角
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 相机位置
camera.position.z = 30;
// 烟花和粒子数组
const fireworks = [];
const particles = [];
// 创建烟花发射器
class Firework {
constructor() {
this.reset();
}
reset() {
this.position = new THREE.Vector3(
(Math.random() - 0.5) * 40,
-20,
(Math.random() - 0.5) * 40
);
this.velocity = new THREE.Vector3(
(Math.random() - 0.5) * 2,
15 + Math.random() * 5,
(Math.random() - 0.5) * 2
);
this.acceleration = new THREE.Vector3(0, -0.15, 0);
this.color = new THREE.Color(Math.random(), Math.random(), Math.random());
this.exploded = false;
}
update() {
if (!this.exploded) {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
if (this.velocity.y <= 0) {
this.explode();
this.exploded = true;
}
}
}
explode() {
const particleCount = 200;
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle(this.position.clone(), this.color));
}
}
}
// 创建粒子
class Particle {
constructor(position, color) {
this.position = position;
const velocity = new THREE.Vector3(
(Math.random() - 0.5) * 0.5,
(Math.random() - 0.5) * 0.5,
(Math.random() - 0.5) * 0.5
);
this.velocity = velocity;
this.acceleration = new THREE.Vector3(0, -0.01, 0);
this.color = color;
this.alpha = 1.0;
this.decay = Math.random() * 0.02 + 0.005;
}
update() {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.alpha -= this.decay;
}
}
// 创建几何体和材质
const fireworkGeometry = new THREE.SphereGeometry(0.2, 8, 8);
const particleGeometry = new THREE.SphereGeometry(0.1, 8, 8);
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 更新控制器
controls.update();
// 清除画布
renderer.render(scene, camera);
// 随机生成新烟花
if (Math.random() < 0.03) {
fireworks.push(new Firework());
}
// 更新和绘制烟花
for (let i = fireworks.length - 1; i >= 0; i--) {
const fw = fireworks[i];
fw.update();
if (fw.exploded) {
fireworks.splice(i, 1);
} else {
const material = new THREE.MeshBasicMaterial({ color: fw.color });
const mesh = new THREE.Mesh(fireworkGeometry, material);
mesh.position.copy(fw.position);
renderer.render(scene, camera);
// 由于THREE.js的渲染机制，这里简化了绘制，实际应用中应使用对象池和统一渲染
}
}
// 更新和绘制粒子
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.update();
if (p.alpha <= 0) {
particles.splice(i, 1);
} else {
const material = new THREE.MeshBasicMaterial({
color: p.color,
transparent: true,
opacity: p.alpha
});
const mesh = new THREE.Mesh(particleGeometry, material);
mesh.position.copy(p.position);
renderer.render(scene, camera);
}
}
}
// 窗口大小调整
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate();
</script>
</body>
</html>
如何选择？
- 新手或快速实现：选择 方案一，它简单、直观,效果也不错。
- 追求更好效果和交互：选择 方案二，Canvas提供了强大的绘图能力，效果可控,是前端特效的主流方案。
- 追求极致视觉和3D体验：选择 方案三，Three.js是3D图形的王者，能创造出令人惊叹的视觉效果,但学习曲线较陡。
希望这些代码能帮助您打造一个精彩的新年网页！
