用HTML5+CSS+JavaScript庆祝国庆

用HTML5+CSS+JavaScript庆祝国庆

中华人民共和国的国庆日是每年的10月1日。

1949年10月1日,中华人民共和国中央人民政府成立,在首都北京天安门广场举行了开国大典,中央人民政府主席毛泽东庄严宣告中华人民共和国成立,并亲手升起了第一面五星红旗。这一历史性的时刻标志着新中国的诞生。1949年12月2日,中央人民政府委员会第四次会议接受全国政协的建议,通过了《关于中华人民共和国国庆日的决议》,决定每年10月1日为中华人民共和国国庆日。

国庆日这一天,全国各地都会举行各种庆祝活动,如悬挂国旗、唱国歌、文艺演出、烟花表演等方式来庆祝这一重要节日。

现在,让我们用HTML5+CSS+JavaScript庆祝中华人民共和国的国庆日。

先看用css3画五星红旗效果:

用css3画五星红旗源码如下:

html 复制代码
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS画五星红旗</title>
    <style>
        .flag{
            width: 300px;
            height: 200px;
            background-color: red;
            position: relative;
        }

        body {
            display: flex;
            height: 100vh; /* 页面高度 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            margin: 0; /* 去掉默认边距 */
        }
        .star{
            margin: 0 0;
            position: absolute;
            display: block;
            /* color: red; */
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;/* */
            border-left: 100px solid transparent;
            transform: rotate(35deg);
            left: 20px;
        }
        .star:before {
            border-bottom: 80px solid yellow;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            height: 0;
            width: 0;
            top: -45px;
            left: -65px;
            display: block;
            content: '';
            transform: rotate(-35deg);
        }
        .star:after{
            content: '';
            margin: 0;
            position: absolute;
            display: block;
            /* color: red; */
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;/* */
            border-left: 100px solid transparent;
            transform: rotate(-70deg);
            left: -107px;
            top: 5px;
        }
        .big{
            /* position: absolute; */
            transform: scale(.3) rotate(35deg);
            top: 10px;
            left: -50px;
            z-index: 3;
        }
        .little1{
            position: absolute;
            transform: scale(.1) rotate(-60deg);
            top: -15px;
            left: 5px;
        }
        .little2{
            position: absolute;
            transform: scale(.1) rotate(-45deg);
            top: 5px;
            left: 30px;
        }
        .little3{
            position: absolute;
            transform: scale(.1) rotate(35deg);
            top: 33px;
            left: 30px;
        }
        .little4{
            position: absolute;
            transform: scale(.1) rotate(60deg);
            top: 50px;
            left: 5px;
        }

 
    </style>

</head> 
<body>
    <div class="flag">
        <div class="star big"></div>
        <div class="star little1"></div>
        <div class="star little2"></div>
        <div class="star little3"></div>
        <div class="star little4"></div>
    </div>
</body>
</html>

下面添加烟花效果烘托国庆气氛

先看国庆烟花效果:

国庆烟花源码如下:

html 复制代码
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国庆烟花气氛</title>
    <style>
        body {
            display: flex;
            height: 100vh; /* 页面高度 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            margin: 0; /* 去掉默认边距 */
            position: relative;
            overflow: hidden;
            background-color: #000; /* 背景设为黑色,模拟夜空 */
        }
        .flag {
            width: 300px;
            height: 200px;
            background-color: red;
            position: relative;
            z-index: 1;
        }
        .star {
            margin: 0 0;
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;
            border-left: 100px solid transparent;
            transform: rotate(35deg);
            left: 20px;
        }
        .star:before {
            border-bottom: 80px solid yellow;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            height: 0;
            width: 0;
            top: -45px;
            left: -65px;
            display: block;
            content: '';
            transform: rotate(-35deg);
        }
        .star:after {
            content: '';
            margin: 0;
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid yellow;
            border-left: 100px solid transparent;
            transform: rotate(-70deg);
            left: -107px;
            top: 5px;
        }
        .big {
            transform: scale(.3) rotate(35deg);
            top: 10px;
            left: -50px;
            z-index: 3;
        }
        .little1 {
            position: absolute;
            transform: scale(.1) rotate(-60deg);
            top: -15px;
            left: 5px;
        }
        .little2 {
            position: absolute;
            transform: scale(.1) rotate(-45deg);
            top: 5px;
            left: 30px;
        }
        .little3 {
            position: absolute;
            transform: scale(.1) rotate(35deg);
            top: 33px;
            left: 30px;
        }
        .little4 {
            position: absolute;
            transform: scale(.1) rotate(60deg);
            top: 50px;
            left: 5px;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* 使canvas不会阻止点击事件 */
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>
    <div class="flag">
        <div class="star big"></div>
        <div class="star little1"></div>
        <div class="star little2"></div>
        <div class="star little3"></div>
        <div class="star little4"></div>
    </div>
    <script>
        const canvas = document.getElementById('fireworks');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        function randomColor() {
            return `hsl(${Math.random() * 360}, 100%, 50%)`;
        }

        function Firework(x, y) {
            this.x = x;
            this.y = y;
            this.size = Math.random() * 10 + 5;
            this.speed = Math.random() * 6 + 2;
            this.angle = Math.random() * Math.PI * 2;
            this.color = randomColor();
            this.exploded = false;
            this.particles = [];

            this.update = function () {
                if (!this.exploded) {
                    this.y -= this.speed;
                    // 限制烟花的最大高度
                    if (this.y < canvas.height * 0.2) { // 高度限制
                        this.exploded = true;
                        this.createParticles();
                    }
                    if (this.size > 0) {
                        this.size -= 0.1;
                    } else {
                        this.exploded = true;
                        this.createParticles();
                    }
                } else {
                    this.particles.forEach(p => p.update());
                }
            };

            this.createParticles = function () {
                const particleCount = Math.random() * 100 + 50;
                for (let i = 0; i < particleCount; i++) {
                    this.particles.push(new Particle(this.x, this.y, this.color));
                }
            };

            this.draw = function () {
                if (!this.exploded) {
                    if (this.size > 0) { // 仅在大小为正时绘制。
                        ctx.fillStyle = this.color;
                        ctx.beginPath();
                        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                        ctx.fill();
                    }
                } else {
                    this.particles.forEach(p => p.draw());
                }
            };
        }

        function Particle(x, y, color) {
            this.x = x;
            this.y = y;
            // 将颜色分解为RGB,以便后续使用
            this.color = color.match(/\d+/g).map(Number);
            this.size = Math.random() * 3 + 2;
            this.speed = Math.random() * 3 + 1;
            this.angle = Math.random() * Math.PI * 2;
            this.alpha = 1;

            this.update = function () {
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;
                this.alpha -= 0.02;
            };

            this.draw = function () {
                ctx.fillStyle = `rgba(${this.color.join(",")}, ${this.alpha})`;
                if (this.alpha > 0) { // 仅当透明度为正时绘制。
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                }
            };
        }

        const fireworks = [];
        function createFirework() {
            const firework = new Firework(Math.random() * canvas.width, canvas.height);
            fireworks.push(firework);
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            fireworks.forEach((firework, index) => {
                firework.update();
                firework.draw();
                if (firework.exploded && firework.particles.length === 0) {
                    fireworks.splice(index, 1);
                }
            });
            requestAnimationFrame(animate);
        }

        for (let i = 0; i < 5; i++) {
            createFirework();
        }
        animate();

        setInterval(createFirework, 1000);
    </script>
</body>
</html>
相关推荐
wycode1 分钟前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
意会31 分钟前
微信闪照小程序实现
前端·css·微信小程序
wycode1 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
第七种黄昏1 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
码码哈哈爱分享1 小时前
Tauri 框架介绍
css·rust·vue·html
我是哈哈hh2 小时前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清2 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
一枚前端小能手2 小时前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
pepedd8642 小时前
浅谈js拷贝问题-解决拷贝数据难题
前端·javascript·trae
@大迁世界2 小时前
useCallback 的陷阱:当 React Hooks 反而拖了后腿
前端·javascript·react.js·前端框架·ecmascript