祝天下老师教师节快乐-HTML+java script-CSDN博客

本文链接：https://blog.csdn.net/2301_81807150/article/details/142417707

效果图

🚀HTML结构揭秘🚀:
- 📝<head>中包含了元信息和样式表。
- 🖼️<body>拥有一个<canvas>元素与一个.text类的<div>，为星空与教师节信息搭建舞台。
🎨CSS魔法调色盘🎨:
- 🌑背景深邃的黑色，奠定星空基调。
- ✨.text类让祝福语居中闪烁，加上阴影特效，确保在星光中夺目。
🤖JavaScript功能拆解🤖:
- 💡初始化：画布尺寸设定，获取绘图上下文。
- 🌠Star类：星点随机闪烁，颜色变换，绘制夜空的每一颗星。
- 💨MeteorRain类：流星雨的绚丽登场，从初始化到动态绘制，每一颗流星都有其独特轨迹。
🎭动画效果背后的逻辑🎭:
- 🌑星空：遍历星体数组，draw方法重现浩瀚星河。
- ✨流星雨：动态更新位置与透明度，每一次移动都是一次视觉盛宴。
💡细节巧思💡:
- 🌟星体颜色随机变换，流星长度、速度、角度各异，造就独一无二的夜空景象。
- 🕰️定时器setTimeout精心调校，星空与流星雨动画流畅不卡顿。
🌟用户体验升级🌟:
- 🌌动画平滑，祝福语清晰可读，星空下的信息传递温暖而有力。
- 🎧虽未在代码中体现，加入背景音乐或月亮相伴，定能让视觉盛宴更添几分感动。

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>教师节快乐</title>
    <style type="text/css">
        body {
            background-color: black;
            z-index: 1;
        }
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .text {
            color: white;
            font-size: 20px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 333;
            font-family: "微软雅黑";
            font-weight: bold;
            line-height: 1.5;
            width: 80%;
            animation: blink 1s infinite;
            animation-timing-function: linear;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-delay: 0.5s;
            animation-fill-mode: forwards;
            animation-play-state: running;
            box-shadow: inset 0 0 10px white;
            text-shadow: 0 0 10px white;
            font-size: 20px;
        }
        @keyframes blink {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <canvas id="stars"></canvas>
    <div class="text">
        何老师，教师节快乐！您是明星，照亮了我前行的路。
        愿您的生活如星河般璀璨，幸福绵长。感谢您的指引，让梦想绽放如星辰，您是我心中永恒的北极星。
    </div>
    <script>
        var context;
        var arr = [];
        var starCount = 800;
        var rains = [];
        var rainCount = 20;

        function init() {
            var stars = document.getElementById("stars");
            windowWidth = window.innerWidth;
            stars.width = windowWidth;
            stars.height = window.innerHeight;
            context = stars.getContext("2d");
        }

        var Star = function () {
            this.x = windowWidth * Math.random();
            this.y = 5000 * Math.random();
            this.text = ".";
            this.color = "white";
            this.getColor = function () {
                var _r = Math.random();
                if (_r < 0.5) {
                    this.color = "#333";
                } else {
                    this.color = "white";
                }
            }
            this.init = function () {
                this.getColor();
            }
            this.draw = function () {
                context.fillStyle = this.color;
                context.fillText(this.text, this.x, this.y);
            }
        }

        function drawMoon() {
            var moon = new Image();
            moon.src = "./images/moon.jpg";
            moon.onload = function() {
                context.drawImage(moon, -5, -10);
            }
        }

        var MeteorRain = function () {
            this.x = -1;
            this.y = -1;
            this.length = -1;
            this.angle = 30;
            this.width = -1;
            this.height = -1;
            this.speed = 1;
            this.offset_x = -1;
            this.offset_y = -1;
            this.alpha = 1;
            this.color1 = "";
            this.color2 = "";
            this.init = function () {
                this.getPos();
                this.alpha = 1;
                this.getRandomColor();
                var x = Math.random() * 80 + 150;
                this.length = Math.ceil(x);
                this.angle = 30;
                x = Math.random() + 0.5;
                this.speed = Math.ceil(x);
                var cos = Math.cos(this.angle * Math.PI / 180);
                var sin = Math.sin(this.angle * Math.PI / 180);
                this.width = this.length * cos;
                this.height = this.length * sin;
                this.offset_x = this.speed * cos;
                this.offset_y = this.speed * sin;
            }
            this.getRandomColor = function () {
                var a = Math.ceil(255 - 240 * Math.random());
                this.color1 = "rgba(" + a + "," + a + "," + a + ",1)";
                this.color2 = "black";
            }
            this.countPos = function () {
                this.x = this.x - this.offset_x;
                this.y = this.y + this.offset_y;
            }
            this.getPos = function () {
                this.x = Math.random() * window.innerWidth;
                this.y = Math.random() * window.innerHeight;
            }
            this.draw = function () {
                context.save();
                context.beginPath();
                context.lineWidth = 1;
                context.globalAlpha = this.alpha;
                var line = context.createLinearGradient(this.x, this.y, this.x + this.width, this.y - this.height);
                line.addColorStop(0, "white");
                line.addColorStop(0.3, this.color1);
                line.addColorStop(0.6, this.color2);
                context.strokeStyle = line;
                context.moveTo(this.x, this.y);
                context.lineTo(this.x + this.width, this.y - this.height);
                context.closePath();
                context.stroke();
                context.restore();
            }
            this.move = function () {
                context.clearRect(this.x + this.width - this.offset_x, this.y - this.height, this.offset_x + 5, this.offset_y + 5);
                this.countPos();
                this.alpha -= 0.002;
                this.draw();
            }
        }

        window.onload = function () {
            init();
            for (var i = 0; i < starCount; i++) {
                var star = new Star();
                star.init();
                star.draw();
                arr.push(star);
            }
            for (var i = 0; i < rainCount; i++) {
                var rain = new MeteorRain();
                rain.init();
                rain.draw();
                rains.push(rain);
            }
            drawMoon();
            playStars();
            playRains();
        }

        function playStars() {
            for (var n = 0; n < starCount; n++) {
                arr[n].getColor();
                arr[n].draw();
            }
            setTimeout(playStars, 100);
        }

        

        function playRains() {
            for (var n = 0; n < rainCount; n++) {
                var rain = rains[n];
                rain.move();
                if (rain.y > window.innerHeight) {
                    context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);
                    rains[n] = new MeteorRain();
                    rains[n].init();
                }
            }
            setTimeout(playRains, 2);
        }
        
        
        
    </script>
</body>
</html>