前言
🍊缘由
把代码献给党，才是新时代程序员的浪漫！
🐣闪亮主角
大家好，我是你们的老朋友，头发越来越少，代码行数却节节攀升的JavaDog程序狗。
眼瞅着，7月1日这个特殊的日子又要到了。往年，咱们程序员除了敲代码，好像也干不了啥“浪漫”的事儿。送花？有点俗。朋友圈？不够酷。直到有一天，狗哥我对着屏幕发呆，突然灵光一闪：为什么不用我们最擅长的方式，把最真挚的祝福献给党呢？
正文
🎯主要目标
1. 如何用 HTML 搭建庆生舞台
2. CSS ：将美好画卷点亮
3. JavaScript 注入灵魂：让爱的烟花动起来
4. 全部HTML代码
🍪目标讲解
一. HTML的舞台艺术
首先，咱们得有个画布，HTML就是这个舞台的骨架。
要画国旗，首先得确保尺寸和比例的严谨。狗哥我可是调试好久，力求还原最标准的五星红旗。
<div class="container">
<canvas id="canvas"></canvas>
<div class="content">
<h1>庆祝中国共产党成立104周年</h1>
<h2>不忘初心 牢记使命</h2>
<div class="flag-container">
<div class="flag">
<div class="stars">
<!-- 大五角星 -->
<div class="star large-star">★</div>
<!-- 四颗小五角星，按照标准比例和角度排列 -->
<div class="star small-star" style="top: 9px; left: 62px; transform: rotate(-18deg);">★</div>
<div class="star small-star" style="top: 27px; left: 80px; transform: rotate(0deg);">★</div>
<div class="star small-star" style="top: 48px; left: 79px; transform: rotate(18deg);">★</div>
<div class="star small-star" style="top: 66px; left: 63px; transform: rotate(36deg);">★</div>
</div>
</div>
</div>
<div class="date">1921 - 2025</div>
</div>
</div>
你看，骨架搭好了，Canvas 放在最底层，负责背景和动态元素；文字内容则通过 overlay-content 层层叠叠地覆盖在上面。这种分层设计，既保证了内容的清晰度，又为后续的炫酷动画打下了基础。简单吧？但里面的门道可不少！
二. 画布上的信仰：css的美化，让红旗飘动
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #8B0000, #B22222, #CD5C5C);
font-family: "Microsoft YaHei", sans-serif;
color: #FFD700;
text-align: center;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
padding-top: 10vh;
}
h1 {
font-size: 3.5rem;
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF4500;
margin-bottom: 20px;
animation: glow 2s infinite alternate;
}
h2 {
font-size: 2rem;
text-shadow: 0 0 5px #FF8C00;
margin-bottom: 30px;
}
.flag-container {
width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
perspective: 1000px;
}
.flag {
width: 100%;
height: 100%;
background-color: #DE2910;
position: relative;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
transform-style: preserve-3d;
animation: wave 8s infinite ease-in-out;
border-radius: 2px;
}
.flag::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
}
.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.star {
position: absolute;
color: #FFDE00;
font-size: 24px;
text-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.large-star {
font-size: 48px;
top: 10px;
left: 20px;
}
.small-star {
font-size: 16px;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 10px 5px;
animation: explode 1s ease-out forwards;
opacity: 0;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF4500;
}
to {
text-shadow: 0 0 15px #FF0000, 0 0 30px #FF4500, 0 0 40px #FF8C00;
}
}
@keyframes wave {
0%, 100% {
transform: rotateY(0deg) rotateX(0deg);
}
25% {
transform: rotateY(5deg) rotateX(2deg);
}
50% {
transform: rotateY(0deg) rotateX(5deg);
}
75% {
transform: rotateY(-5deg) rotateX(2deg);
}
}
@keyframes explode {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}
.date {
font-size: 2.5rem;
margin-top: 30px;
color: #FFFFFF;
text-shadow: 0 0 10px #FF0000;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
</style>
这些动画，让整个页面不仅仅是展示信息，更是在讲述一个故事，传递一种情感。
三. JavaScript的灵魂注入：动起来，我的爱国代码！
光有静态的 HTML 和 CSS，以及 Canvas 的绘图能力，还不足以称之为“炫丽丰富”。JavaScript 才是让这一切“活”起来的灵魂！
<script>
// 设置canvas全屏
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 粒子系统
const particles = [];
const colors = ['#FF0000', '#FF4500', '#FF8C00', '#FFD700', '#FFFFFF'];
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.alpha = Math.random() * 0.5 + 0.1;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.01;
if (this.alpha > 0) this.alpha -= 0.002;
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
function initParticles() {
for (let i = 0; i < 100; i++) {
particles.push(new Particle());
}
}
function handleParticles() {
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
if (particles[i].size <= 0.2 || particles[i].alpha <= 0) {
particles.splice(i, 1);
i--;
}
}
if (particles.length < 100 && Math.random() > 0.7) {
particles.push(new Particle());
}
}
// 烟花效果
function createFirework(x, y, color) {
const particlesCount = 50;
const angleIncrement = (Math.PI * 2) / particlesCount;
for (let i = 0; i < particlesCount; i++) {
const particle = new Particle();
particle.x = x;
particle.y = y;
particle.size = Math.random() * 3 + 1;
particle.color = color;
particle.speedX = Math.cos(angleIncrement * i) * (Math.random() * 3 + 1);
particle.speedY = Math.sin(angleIncrement * i) * (Math.random() * 3 + 1);
particle.alpha = 1;
particle.decay = Math.random() * 0.015 + 0.01;
particles.push(particle);
}
}
// 随机放烟花
function randomFirework() {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height * 0.6;
const color = colors[Math.floor(Math.random() * colors.length)];
createFirework(x, y, color);
}
// 动画循环
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#8B0000');
gradient.addColorStop(0.5, '#B22222');
gradient.addColorStop(1, '#CD5C5C');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
handleParticles();
// 随机放烟花
if (Math.random() > 0.95) {
randomFirework();
}
requestAnimationFrame(animate);
}
initParticles();
animate();
// 窗口大小调整
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 点击放烟花
canvas.addEventListener('click', function(e) {
createFirework(e.clientX, e.clientY, colors[Math.floor(Math.random() * colors.length)]);
});
// 自动放烟花
setInterval(randomFirework, 1000);
</script>
四. 全部代码
全部代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>庆祝中国共产党成立周年</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #8B0000, #B22222, #CD5C5C);
font-family: "Microsoft YaHei", sans-serif;
color: #FFD700;
text-align: center;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
padding-top: 10vh;
}
h1 {
font-size: 3.5rem;
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF4500;
margin-bottom: 20px;
animation: glow 2s infinite alternate;
}
h2 {
font-size: 2rem;
text-shadow: 0 0 5px #FF8C00;
margin-bottom: 30px;
}
.flag-container {
width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
perspective: 1000px;
}
.flag {
width: 100%;
height: 100%;
background-color: #DE2910;
position: relative;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
transform-style: preserve-3d;
animation: wave 8s infinite ease-in-out;
border-radius: 2px;
}
.flag::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
}
.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.star {
position: absolute;
color: #FFDE00;
font-size: 24px;
text-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.large-star {
font-size: 48px;
top: 10px;
left: 20px;
}
.small-star {
font-size: 16px;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 10px 5px;
animation: explode 1s ease-out forwards;
opacity: 0;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF4500;
}
to {
text-shadow: 0 0 15px #FF0000, 0 0 30px #FF4500, 0 0 40px #FF8C00;
}
}
@keyframes wave {
0%, 100% {
transform: rotateY(0deg) rotateX(0deg);
}
25% {
transform: rotateY(5deg) rotateX(2deg);
}
50% {
transform: rotateY(0deg) rotateX(5deg);
}
75% {
transform: rotateY(-5deg) rotateX(2deg);
}
}
@keyframes explode {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}
.date {
font-size: 2.5rem;
margin-top: 30px;
color: #FFFFFF;
text-shadow: 0 0 10px #FF0000;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
</style>
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
<div class="content">
<h1>庆祝中国共产党成立104周年</h1>
<h2>不忘初心 牢记使命</h2>
<div class="flag-container">
<div class="flag">
<div class="stars">
<!-- 大五角星 -->
<div class="star large-star">★</div>
<!-- 四颗小五角星，按照标准比例和角度排列 -->
<div class="star small-star" style="top: 9px; left: 62px; transform: rotate(-18deg);">★</div>
<div class="star small-star" style="top: 27px; left: 80px; transform: rotate(0deg);">★</div>
<div class="star small-star" style="top: 48px; left: 79px; transform: rotate(18deg);">★</div>
<div class="star small-star" style="top: 66px; left: 63px; transform: rotate(36deg);">★</div>
</div>
</div>
</div>
<div class="date">1921 - 2025</div>
</div>
</div>
<script>
// 设置canvas全屏
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 粒子系统
const particles = [];
const colors = ['#FF0000', '#FF4500', '#FF8C00', '#FFD700', '#FFFFFF'];
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.alpha = Math.random() * 0.5 + 0.1;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.2) this.size -= 0.01;
if (this.alpha > 0) this.alpha -= 0.002;
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
function initParticles() {
for (let i = 0; i < 100; i++) {
particles.push(new Particle());
}
}
function handleParticles() {
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
if (particles[i].size <= 0.2 || particles[i].alpha <= 0) {
particles.splice(i, 1);
i--;
}
}
if (particles.length < 100 && Math.random() > 0.7) {
particles.push(new Particle());
}
}
// 烟花效果
function createFirework(x, y, color) {
const particlesCount = 50;
const angleIncrement = (Math.PI * 2) / particlesCount;
for (let i = 0; i < particlesCount; i++) {
const particle = new Particle();
particle.x = x;
particle.y = y;
particle.size = Math.random() * 3 + 1;
particle.color = color;
particle.speedX = Math.cos(angleIncrement * i) * (Math.random() * 3 + 1);
particle.speedY = Math.sin(angleIncrement * i) * (Math.random() * 3 + 1);
particle.alpha = 1;
particle.decay = Math.random() * 0.015 + 0.01;
particles.push(particle);
}
}
// 随机放烟花
function randomFirework() {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height * 0.6;
const color = colors[Math.floor(Math.random() * colors.length)];
createFirework(x, y, color);
}
// 动画循环
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#8B0000');
gradient.addColorStop(0.5, '#B22222');
gradient.addColorStop(1, '#CD5C5C');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
handleParticles();
// 随机放烟花
if (Math.random() > 0.95) {
randomFirework();
}
requestAnimationFrame(animate);
}
initParticles();
animate();
// 窗口大小调整
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 点击放烟花
canvas.addEventListener('click', function(e) {
createFirework(e.clientX, e.clientY, colors[Math.floor(Math.random() * colors.length)]);
});
// 自动放烟花
setInterval(randomFirework, 1000);
</script>
</body>
</html>
总结
所以，各位程序员朋友们，别再犹豫了！在这个特殊的日子里，让我们把最真挚的祝福，写进最骄傲的代码里，献给我们伟大的党！
🍈猜你想问
如何与博主联系进行探讨
关注公众号【JavaDog程序狗】
公众号回复【入群】或者【加入】，便可成为【程序员学习交流摸鱼群】的一员，问题随便问，牛逼随便吹，目前群内已有超过380+个小伙伴啦！！！
2. 踩踩博主博客
里面有博主的私密联系方式呦 ！，大家可以在里面留言，随意发挥，有问必答😘
🍯猜你喜欢
文章推荐
【实操】Spring Cloud Alibaba AI，阿里AI这不得玩一下(含前后端源码)
【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【模块分层】还不会SpringBoot项目模块分层？来这手把手教你！
