首页 > 其他分享 >国庆快乐!

国庆快乐!

时间:2024-09-29 13:51:40浏览次数:10  
标签:particlesCanvas color 快乐 random transform flag 国庆 Math

谨以此代码 庆祝国庆~

!!前排提示,代码并不严谨!请勿随意传播!请勿恶意解读!!

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

相关文章

  • 2024国庆做题总结
    SecretSanta思路这是一个需要深思熟虑的贪心,总之还算有点复杂。首先,如果一个数不在它自己数值的下标上,就可以填进去,将剩下的还未填的数记录下来,此时情况如下(样例1,第一组):当前:21_剩余:3然后将剩余的数的那个数组反过来,即从大到小排序,填满空位,这样可能会有冲突,但是,可以证明......
  • 国庆头像制作小程序相关代码
    ↓↓ 点击下方搜索开始制作您的专属头像 ↓↓发现-》搜一搜-》最美易飞证件照制作国庆头像自定义头像制作、微信头像直接获取制作小程序源码index.wxml文件代码//pages/userPhoto/userPhoto.js//获取应用实例constapp=getApp()import{Router}from'../../......
  • 国庆旅游高峰,EasyCVR安防监控视频汇聚平台如何守护景区安全管理
    随着国庆节的临近,国内旅游市场迎来了一年中最为繁忙的旅游高峰期。各大景区游客数量激增,给景区安全管理带来了前所未有的挑战。面对景区安全风险意识不足、防护措施不完善、游客安全意识欠缺等问题,构建一套高效、智能的景区旅游安全管理系统显得尤为重要。EasyCVR视频平台凭借其先......
  • 【编程人员的快乐】
    【聊聊编程人员的快乐,起初学习编程的快乐是什么?】https://www.bilibili.com/video/BV1rj41187Mf/?share_source=copy_web&vd_source=29585fff97e05f2b0fbc5acf7aeb03be<iframesrc="//player.bilibili.com/player.html?isOutside=true&aid=448929002&bvid=BV1rj41187Mf&ci......
  • 喜迎国庆,储迹NAS服务省药某中心
    储迹NAS,又开拓一新行业!“省内药某中心”甲方机房现场储迹NAS承担此“江苏药某中心”重要数据备份和内部文件共享储迹NAS具有文件共享和备份功能:1、13种ACL文件夹和文件权限在信创环境中,做到了和Windows操作系统一样,对文件和文件夹管理的有13种ACL权限。常规Linux用户只有3种文件权......
  • 国庆节到了,扣子智能体coze画板功能实现贺卡编辑智能体自动添加logo和二维码,让海报品牌
    大家好,我是Shelly,一个专注于输出AI工具和科技前沿内容的AI应用教练,体验过300+款以上的AI应用工具。关注科技及大模型领域对社会的影响10年+。关注我一起驾驭AI工具,拥抱AI时代的到来。自媒体时代,不管是一个人、一个团队还是一家公司,都是一个IP。那么添加品牌的标志就是必不可少......
  • 国庆长假出游带什么好?这五款智能设备让你玩得更尽兴
    随着国庆长假的临近,许多人已经开始规划他们的旅行计划,期待在这段时间里放松身心,享受假期的乐趣。然而,旅行不仅仅是关于目的地的美景和文化体验,它同样关乎旅途中的舒适度和便利性。在科技日新月异的今天,智能设备已经成为我们旅行中不可或缺的伙伴。它们不仅能够提升我们的旅行体......
  • 今日最新早上好问候语精选,相互牵挂,快乐同行
    1、天天问候,真情永远,你我健康,幸福美满。金山银山,不如平平安安,大富大贵,不如健康到位,知足常乐,才是人生之最。要为我们来之不易的友情干杯!只要心情舒畅,山水就会漂亮,只要身体健康,风景总在前方。愿我们友情常在,四季都会花开! 2、祝福它不是一种形式,它是一种无言的关怀;问候它不是一......
  • 【教程】Scrartch少儿编程 | 国庆节升国旗
    在本教程中,我们将教你如何使用Scratch制作一个国庆节升国旗的动画。第一步:创建背景打开Scratch,点击舞台,选择一个蓝天背景,模拟升旗场景。如果没有合适的背景,可以自己绘制一个简单的广场场景。第二步:绘制国旗新建一个精灵,绘制一个长方形并填充为红色。在旗面上画上五颗黄色......
  • 使用HTML+JS实现国庆节倒计时网页实例代码
    马上就是每年10月1日的国庆节了,为了增加节日氛围,许多网站会设置倒计时,以提醒人们国庆节的临近。本文站长工具网将介绍如何使用HTML和JavaScript创建一个简单的国庆节倒计时网页,并附上完整的实例代码供大家参考。1.网页设计基础在开始编写代码之前,我们需要了解一些基本的网......