谨以此代码 庆祝国庆~
!!前排提示,代码并不严谨!请勿随意传播!请勿恶意解读!!
index.html文件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>国庆快乐</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 id="main-title">国庆快乐</h1>
<h2 id="slogan">庆祝中华人民共和国成立75周年</h2>
<!-- 动态飘动的国旗 -->
<div id="flags-container"></div>
<!-- 烟花特效 -->
<canvas id="fireworksCanvas"></canvas>
<!-- 粒子背景 -->
<canvas id="particlesCanvas"></canvas>
</div>
<!-- 背景音乐 -->
<audio id="backgroundMusic" loop autoplay>
<source src="music/national_day.mp3" type="audio/mpeg">
</audio>
<script src="scripts.js"></script>
</body>
</html>
scripts.js文件:
// 获取烟花和粒子画布
const fireworksCanvas = document.getElementById('fireworksCanvas');
const fireworksCtx = fireworksCanvas.getContext('2d');
resizeCanvas(fireworksCanvas);
// 获取粒子背景画布
const particlesCanvas = document.getElementById('particlesCanvas');
const particlesCtx = particlesCanvas.getContext('2d');
resizeCanvas(particlesCanvas);
// 动态飘动的国旗生成,包含星星
const flagsContainer = document.getElementById('flags-container');
for (let i = 0; i < 6; i++) {
const flag = document.createElement('div');
flag.className = 'flag';
// 大星星
// const bigStar = document.createElement('div');
// bigStar.className = 'big-star';
// flag.appendChild(bigStar);
// 4 颗小星星
// for (let j = 0; j < 4; j++) {
// const smallStar = document.createElement('div');
// smallStar.className = 'small-star';
// flag.appendChild(smallStar);
// }
flagsContainer.appendChild(flag);
}
// 创建烟花效果
let fireworks = [];
fireworksCanvas.addEventListener('click', function(e) {
createFireworkAt(e.clientX, e.clientY);
});
function createFireworkAt(x, y) {
const color = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`;
fireworks.push(new Firework(x, y, color));
}
class Firework {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.particles = [];
for (let i = 0; i < 30; i++) {
this.particles.push(new Particle(x, y, color));
}
}
update() {
this.particles.forEach(particle => particle.update());
this.particles = this.particles.filter(particle => particle.size > 0);
}
draw() {
this.particles.forEach(particle => particle.draw());
}
}
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.size = Math.random() * 5 + 2;
this.speedX = (Math.random() - 0.5) * 6;
this.speedY = (Math.random() - 0.5) * 6;
this.gravity = 0.1;
this.color = color;
this.alpha = 1;
}
update() {
this.speedY += this.gravity;
this.x += this.speedX;
this.y += this.speedY;
this.size -= 0.1;
this.alpha -= 0.02;
}
draw() {
fireworksCtx.fillStyle = this.color.replace('1)', `${this.alpha})`);
fireworksCtx.beginPath();
fireworksCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
fireworksCtx.fill();
}
}
// 烟花动画循环
function animateFireworks() {
fireworksCtx.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
fireworks.forEach(firework => {
firework.update();
firework.draw();
});
fireworks = fireworks.filter(firework => firework.particles.length > 0);
requestAnimationFrame(animateFireworks);
}
animateFireworks();
// 创建粒子背景效果
let particles = [];
function createParticles() {
for (let i = 0; i < 100; i++) {
particles.push(new BackgroundParticle());
}
}
class BackgroundParticle {
constructor() {
this.x = Math.random() * particlesCanvas.width;
this.y = Math.random() * particlesCanvas.height;
this.size = Math.random() * 2 + 1;
this.speedX = (Math.random() - 0.5) * 2;
this.speedY = (Math.random() - 0.5) * 2;
this.color = `rgba(255, 255, 255, ${Math.random()})`;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x < 0 || this.x > particlesCanvas.width) this.speedX *= -1;
if (this.y < 0 || this.y > particlesCanvas.height) this.speedY *= -1;
}
draw() {
particlesCtx.beginPath();
particlesCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
particlesCtx.fillStyle = this.color;
particlesCtx.fill();
}
}
// 粒子背景动画循环
function animateParticles() {
particlesCtx.clearRect(0, 0, particlesCanvas.width, particlesCanvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animateParticles);
}
createParticles();
animateParticles();
// 背景音乐控制
const backgroundMusic = document.getElementById('backgroundMusic');
backgroundMusic.volume = 0.3;
// 调整画布尺寸
function resizeCanvas(canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', () => {
resizeCanvas(fireworksCanvas);
resizeCanvas(particlesCanvas);
});
styles.css文件:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: 'Arial', sans-serif;
background: radial-gradient(circle, #09203f, #000000);
color: white;
overflow: hidden;
}
.container {
position: relative;
text-align: center;
z-index: 1;
}
#main-title {
font-size: 80px;
margin-top: 8%;
color: #FFD700;
text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
animation: glow 2s infinite alternate;
font-family: 'Courier New', Courier, monospace;
letter-spacing: 5px;
}
#slogan {
font-size: 40px;
color: #FF4500;
margin-top: 0;
text-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
animation: float 3s ease-in-out infinite alternate;
}
/* 添加国旗容器位置调整 */
#flags-container {
position: absolute;
top: 180%; /* 适当下移位置 */
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 100px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
/* 国旗样式 */
.flag {
width: 120px;
height: 80px;
background-color: red;
position: relative;
border: 2px solid gold;
box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
animation: flag-waving 5s linear infinite;
}
/* 大星星 */
.flag .big-star {
width: 20px;
height: 20px;
position: absolute;
top: 10px;
left: 10px;
background-color: yellow;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* 小星星 */
.flag .small-star {
width: 10px;
height: 10px;
position: absolute;
background-color: yellow;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* 小星星具体位置与旋转角度 */
.flag .small-star:nth-child(2) {
top: 3px;
left: 35px;
transform: rotate(-30deg);
}
.flag .small-star:nth-child(3) {
top: 15px;
left: 42px;
transform: rotate(-15deg);
}
.flag .small-star:nth-child(4) {
top: 30px;
left: 40px;
transform: rotate(0deg);
}
.flag .small-star:nth-child(5) {
top: 38px;
left: 25px;
transform: rotate(15deg);
}
@keyframes flag-waving {
0% { transform: rotate(0deg); }
50% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
#fireworksCanvas, #particlesCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700, 0 0 50px #FFD700;
}
to {
text-shadow: 0 0 20px #FF4500, 0 0 30px #FF4500, 0 0 40px #FF4500, 0 0 50px #FF4500;
}
}
@keyframes float {
from {
transform: translateY(0);
}
to {
transform: translateY(-10px);
}
}
@keyframes flag-waving {
0% { transform: rotate(0deg); }
50% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
!!再次提示,代码并不严谨!请勿随意传播!请勿恶意解读!!不完善内容请自行完善!!
标签:particlesCanvas,color,快乐,random,transform,flag,国庆,Math From: https://blog.csdn.net/Q_w7742/article/details/142633629