第一版
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>春节拜年 - LINUX DO</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff4d4d; /* 红色背景 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0; /* 确保烟花在最底层 */
}
.red-envelope {
width: 200px;
height: 300px;
background-color: #d9534f;
border-radius: 15px;
position: relative;
overflow: hidden;
z-index: 2; /* 确保红包内容在烟花上层 */
}
.red-envelope .top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: #a92b29; /* 红包顶部的深色部分 */
animation: openTop 2s ease-out forwards;
z-index: 1;
}
.red-envelope .top-text {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
color: #fff;
font-weight: bold;
opacity: 0;
z-index: 2;
animation: showText 2s 1.5s forwards;
text-align: center;
}
.red-envelope .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
font-weight: bold;
z-index: 0;
opacity: 0;
animation: showContent 2s 1.5s forwards;
}
/* 背景烟花 */
@keyframes openTop {
0% {
height: 0;
}
100% {
height: 33%; /* 设置顶部打开三分之一 */
}
}
@keyframes showText {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes showContent {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* 人物样式 */
.person {
position: absolute;
bottom: 10%;
left: 5%;
display: flex;
align-items: center;
z-index: 2;
}
.person .body {
width: 20px;
height: 50px;
background-color: #5a2d2e;
border-radius: 10px;
position: relative;
}
.person .head {
width: 20px;
height: 20px;
background-color: #ffdf6e;
border-radius: 50%;
position: absolute;
top: -15px;
left: 0;
}
.person .arm-left,
.person .arm-right {
width: 40px;
height: 5px;
background-color: #5a2d2e;
position: absolute;
top: 15px;
}
.person .arm-left {
left: -35px;
transform: rotate(-30deg);
transform-origin: right center;
}
.person .arm-right {
right: -35px;
transform: rotate(30deg);
transform-origin: left center;
}
.person .pants {
width: 20px;
height: 20px;
background-color: #1e4d6e;
border-radius: 5px;
position: absolute;
bottom: 0;
}
.person .shoes {
width: 20px;
height: 10px;
background-color: #333;
border-radius: 5px;
position: absolute;
bottom: -10px;
}
.person .person2 {
left: 35%; /* 另一个人 */
}
/* 添加LINUX DO标志和图片 */
.logo-container {
position: absolute;
bottom: 5%;
text-align: center;
z-index: 3;
}
.logo-container img {
width: 150px;
height: auto;
margin-bottom: 20px;
}
.logo-container .text {
font-size: 24px;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<div class="red-envelope">
<div class="top"></div>
<div class="top-text">富强民主文明和谐</div>
<div class="content">LINUX DO</div>
</div>
<!-- 画面左下角的两个人 -->
<div class="person">
<div class="body">
<div class="head"></div>
<div class="arm-left"></div>
<div class="arm-right"></div>
<div class="pants"></div>
<div class="shoes"></div>
</div>
<div class="person2">
<div class="body">
<div class="head"></div>
<div class="arm-left"></div>
<div class="arm-right"></div>
<div class="pants"></div>
<div class="shoes"></div>
</div>
</div>
</div>
<!-- 添加LINUX DO标志 -->
<div class="logo-container">
<img src="https://linux.do/uploads/default/original/3X/a/8/a8168bb80c93075aad7aa1f598eee063adef1cb0.png" alt="LINUX DO Logo">
<div class="text">LINUX DO</div>
</div>
<script>
// 烟花效果
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 调整 canvas 大小
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
class Firework {
constructor(x, y) {
this.x = x;
this.y = y;
this.alpha = 1;
this.particles = [];
this.createParticles();
}
createParticles() {
const colors = ['#ffdf00', '#ff6347', '#32cd32', '#ff4500', '#00bfff', '#ff1493'];
// 增加粒子数量,默认300,改为500
for (let i = 0; i < 500; i++) {
this.particles.push(new Particle(this.x, this.y, colors[Math.floor(Math.random() * colors.length)]));
}
}
update() {
this.particles.forEach(particle => particle.update());
this.alpha -= 0.02;
}
draw() {
this.particles.forEach(particle => particle.draw());
}
isDead() {
return this.alpha <= 0;
}
}
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
// 增加初始粒子大小
this.size = Math.random() * 6 + 3;
this.speedX = Math.random() * 12 - 6; // 增加速度范围,粒子飞得更远
this.speedY = Math.random() * 12 - 6;
this.alpha = 1;
this.lifeTime = Math.random() * 2 + 1; // 每个粒子的生命周期
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.alpha -= 0.02; // 渐变透明度
this.size *= 0.98; // 渐小
this.lifeTime -= 0.02; // 每个粒子生命周期结束
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color; // 直接使用颜色字符串
ctx.globalAlpha = this.alpha; // 使用 alpha 透明度
ctx.fill();
}
}
const fireworks = [];
function createFirework() {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
fireworks.push(new Firework(x, y));
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
fireworks.forEach((firework, index) => {
firework.update();
firework.draw();
if (firework.isDead()) {
fireworks.splice(index, 1);
}
});
requestAnimationFrame(animate);
}
// 增加更多烟花的发射
setInterval(createFirework, Math.random() * 300 + 200); // 增加发射频率,确保烟花更密集
animate();
</script>
</body>
</html>
我技术不精,代码写完之后放GPT改了一下,但那个人的部分实在是一言难尽,总之,剩下的靠你们了
增加效果图:
希望有大佬可以帮忙改一下小人,小人真的是一言难尽,感谢
第二版
借鉴了 @xiongcaihu 的创意
增加了一些其他东西
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>春节拜年 - LINUX DO</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff4d4d; /* 红色背景 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0; /* 确保烟花在最底层 */
}
.red-envelope {
width: 200px;
height: 300px;
background-color: #d9534f;
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 2;
}
.red-envelope .top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: #a92b29;
animation: openTop 2s ease-out forwards;
z-index: 1;
}
.red-envelope .top-text {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
color: #fff;
font-weight: bold;
opacity: 0;
animation: showText 2s 1.5s forwards;
text-align: center;
}
.red-envelope .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
font-weight: bold;
z-index: 0;
opacity: 0;
animation: showContent 2s 1.5s forwards;
}
@keyframes openTop {
0% {
height: 0;
}
100% {
height: 33%;
}
}
@keyframes showText {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes showContent {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.countdown {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
color: white;
font-size: 18px;
font-weight: bold;
backdrop-filter: blur(5px);
z-index: 4;
}
.logo-container {
position: absolute;
bottom: 5%;
text-align: center;
z-index: 3;
left: 50%;
transform: translateX(-50%);
}
.logo-container img {
width: 150px;
height: auto;
margin-bottom: 20px;
}
.logo-container .text {
font-size: 24px;
color: white;
font-weight: bold;
}
.emoji {
position: absolute;
font-size: 2rem;
pointer-events: none;
animation: floatUp 2s ease-out forwards;
}
@keyframes floatUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
.spark {
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
animation: explode 1s ease-out forwards;
}
@keyframes explode {
0% {
opacity: 1;
transform: translate(0, 0);
}
100% {
opacity: 0;
transform: translate(var(--dx), var(--dy));
}
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<div class="red-envelope">
<div class="top"></div>
<div class="top-text">富强民主文明和谐</div>
<div class="content">LINUX DO</div>
</div>
<div class="logo-container">
<img src="https://linux.do/uploads/default/original/3X/a/8/a8168bb80c93075aad7aa1f598eee063adef1cb0.png" alt="LINUX DO Logo">
<div class="text">LINUX DO</div>
</div>
<div class="countdown" id="countdown"></div>
<div id="fireworks-container" class="fixed top-0 left-0 w-full h-full pointer-events-none"></div>
<script>
// 获取 canvas 元素
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 烟花效果
class Firework {
constructor(x, y) {
this.x = x;
this.y = y;
this.alpha = 1;
this.particles = [];
this.createParticles();
}
createParticles() {
const colors = ['#ffdf00', '#ff6347', '#32cd32', '#ff4500', '#00bfff', '#ff1493'];
for (let i = 0; i < 500; i++) {
this.particles.push(new Particle(this.x, this.y, colors[Math.floor(Math.random() * colors.length)]));
}
}
update() {
this.particles.forEach(particle => particle.update());
this.alpha -= 0.02;
}
draw() {
this.particles.forEach(particle => particle.draw());
}
isDead() {
return this.alpha <= 0;
}
}
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.size = Math.random() * 6 + 3;
this.speedX = Math.random() * 12 - 6;
this.speedY = Math.random() * 12 - 6;
this.alpha = 1;
this.lifeTime = Math.random() * 2 + 1;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.alpha -= 0.02;
this.size *= 0.98;
this.lifeTime -= 0.02;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.fill();
}
}
const fireworks = [];
function createFirework(x, y) {
fireworks.push(new Firework(x, y));
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
fireworks.forEach((firework, index) => {
firework.update();
firework.draw();
if (firework.isDead()) {
fireworks.splice(index, 1);
}
});
requestAnimationFrame(animate);
}
setInterval(() => {
const randomX = Math.random() * canvas.width;
const randomY = Math.random() * canvas.height;
createFirework(randomX, randomY);
}, Math.random() * 300 + 200);
animate();
// 随机 emoji 列表
const emojis = ['🎉', '✨', '🎆', '🎇', '💥', '❤️', '🌟', '😊', '🥳', '🎊', '🎈', '🌸', '🌠', '🌈', '🔥'];
// 生成随机 emoji
function getRandomEmoji() {
return emojis[Math.floor(Math.random() * emojis.length)];
}
// 创建 emoji
function createEmoji(x, y) {
const emoji = document.createElement('div');
emoji.classList.add('emoji');
emoji.textContent = getRandomEmoji();
emoji.style.left = `${x}px`;
emoji.style.top = `${y}px`;
document.body.appendChild(emoji);
// 移除 emoji 元素
setTimeout(() => {
document.body.removeChild(emoji);
}, 2000);
}
// 用户按下任意键或点击鼠标发射随机 emoji
document.addEventListener('keydown', (event) => {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
createEmoji(x, y);
});
document.addEventListener('click', (event) => {
createEmoji(event.clientX, event.clientY);
createFirework(event.clientX, event.clientY);
});
// 获取农历春节日期
function getChineseNewYearDate() {
return new Date('2025-01-29T00:00:00');
}
// 更新倒计时
function updateCountdown() {
const now = new Date();
const newYearDate = getChineseNewYearDate();
const timeDiff = newYearDate - now;
if (timeDiff > 0) {
const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
document.getElementById('countdown').textContent = `距离新年还有 ${days}天 ${hours}时 ${minutes}分 ${seconds}秒`;
} else {
const daysSince = Math.floor(-timeDiff / (1000 * 60 * 60 * 24));
const hoursSince = Math.floor((-timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutesSince = Math.floor((-timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const secondsSince = Math.floor((-timeDiff % (1000 * 60)) / 1000);
document.getElementById('countdown').textContent = `新的一年已经开始了 ${daysSince}天 ${hoursSince}时 ${minutesSince}分 ${secondsSince}秒`;
}
}
setInterval(updateCountdown, 1000);
updateCountdown();
</script>
</body>
</html>
效果图:
如果可以的话建议自己试一试
欢迎佬们一同制作,感谢!!!
持续更新,欢迎佬们一同制作,感谢!!!