流星划过背景动画特效

已于 2025-06-27 11:24:35 修改
阅读量628 收藏 8
点赞数 7
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
于 2025-06-16 15:56:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148693704

<!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;
            height: 100vh;
            overflow: hidden;
            background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
            font-family: Arial, sans-serif;
        }

        canvas {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
            text-align: center;
            padding-top: 20vh;
        }

        h1 {
            font-size: 3em;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        p {
            font-size: 1.2em;
            max-width: 600px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: rgba(255,255,255,0.2);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-size: 1.1em;
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.3);
        }

        .btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        /* 插入的链接样式 */
        .custom-link {
            position: fixed;
            bottom: 20px;
            right: 20px;
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-size: 14px;
            background: rgba(0,0,0,0.3);
            padding: 8px 15px;
            border-radius: 20px;
            z-index: 10;
            transition: all 0.3s ease;
        }

        .custom-link:hover {
            color: white;
            background: rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <canvas id="meteorCanvas"></canvas>
    
    <div class="content">
        <h1>流星划过夜空</h1>
        <p>欣赏这美丽的流星雨动画效果，每一颗流星都是随机生成的，带来独特的视觉体验。</p>
        <a href="#" class="btn" id="moreMeteors">更多流星</a>
    </div>
    

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('meteorCanvas');
            const ctx = canvas.getContext('2d');
            const moreMeteorsBtn = document.getElementById('moreMeteors');
            
            // 设置canvas尺寸为窗口大小
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // 流星数组
            let meteors = [];
            
            // 流星类
            class Meteor {
                constructor() {
                    this.reset();
                    this.speed = Math.random() * 10 + 5;
                    this.length = Math.random() * 100 + 50;
                }
                
                reset() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * -100;
                    this.size = Math.random() * 2 + 1;
                    this.color = `hsl(${Math.random() * 60 + 20}, 100%, ${Math.random() * 30 + 70}%)`;
                    this.angle = Math.random() * Math.PI / 4 + Math.PI / 8;
                    this.speedX = Math.cos(this.angle) * this.speed;
                    this.speedY = Math.sin(this.angle) * this.speed;
                    this.alpha = 1;
                    this.decay = Math.random() * 0.02 + 0.01;
                }
                
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    this.alpha -= this.decay;
                    
                    // 如果流星飞出屏幕或消失，重置
                    if (this.y > canvas.height || this.x > canvas.width || this.x < 0 || this.alpha <= 0) {
                        this.reset();
                    }
                }
                
                draw() {
                    ctx.save();
                    ctx.globalAlpha = this.alpha;
                    
                    // 绘制流星尾迹
                    const gradient = ctx.createLinearGradient(this.x, this.y, this.x - this.speedX * 5, this.y - this.speedY * 5);
                    gradient.addColorStop(0, this.color);
                    gradient.addColorStop(1, 'transparent');
                    
                    ctx.strokeStyle = gradient;
                    ctx.lineWidth = this.size;
                    ctx.beginPath();
                    ctx.moveTo(this.x, this.y);
                    ctx.lineTo(this.x - this.speedX * (this.length / this.speed), this.y - this.speedY * (this.length / this.speed));
                    ctx.stroke();
                    
                    // 绘制流星头部
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size * 1.5, 0, Math.PI * 2);
                    ctx.fill();
                    
                    ctx.restore();
                }
            }
            
            // 创建初始流星
            function createMeteors(count) {
                for (let i = 0; i < count; i++) {
                    meteors.push(new Meteor());
                }
            }
            
            // 动画循环
            function animate() {
                requestAnimationFrame(animate);
                
                // 半透明填充制造拖尾效果
                ctx.fillStyle = 'rgba(27, 39, 53, 0.2)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 更新和绘制所有流星
                meteors.forEach(meteor => {
                    meteor.update();
                    meteor.draw();
                });
            }
            
            // 初始化
            createMeteors(15);
            animate();
            
            // 点击按钮添加更多流星
            moreMeteorsBtn.addEventListener('click', function(e) {
                e.preventDefault();
                createMeteors(10);
            });
            
            // 窗口大小改变时调整canvas尺寸
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
        });
    </script>
</body>
</html>

ziblog
关注
WPF实现鼠标划过点亮粒子背景特效
dnazhd的博客
08-05 1071
实现效果如下： 实现思路与上一篇博文WPF实现响应鼠标位置粒子背景动画特效一致，这里主要添加了粒子透明度改变动画。以下是在该博文的基础上进行修改的： 1、粒子类Particle.cs中添加初始半径属性 /// <summary> /// 初始半径 /// </summary> public double DefaultRadius; 2、粒子系统类ParticleSystem.cs 添加方法：
html5 canvas山顶夜空流星划过背景动画js特效
ICode联盟
03-04 366
基于html5 canvas绘制的山顶夜空流星划过背景动画特效，山体会移动，夜空中还有无数星星。
纯CSS3流星雨划过动画特效
zichenblog的博客
06-16 881
title>纯CSS3流星雨划过动画特效</title>/* 插入的链接样式 *//* 创建随机星星 *//* 创建多个流星 */
CSS星星闪烁流星划过动画特效
唐屁屁
03-10 1727
要更真实的星星闪烁 就要不同频率的闪烁 流星也是一样
php星空背景动态,HTML5+Canvas的星星流星夜空背景动画特效
weixin_36146811的博客
03-19 512
HTML5+Canvas星星流星夜空背景动画特效var WINDOW_WIDTH = document.body.offsetWidth;var WINDOW_HEIGHT = document.body.offsetHeight;var canvas,context;var num = 500;var stars = [];var mouseX = WINDOW_WIDTH/2;var mous...
css实现流星划过动画
苏苏就是小苏苏的博客
11-16 1944
👏渐变+伪元素实现流星，translateY实现划过动画，速速来Get吧~ 🥇文末分享源代码。记得点赞+关注+收藏！
三、 CSS3流星雨划过动画特效
qq_52916408的博客
03-23 983
文章目录三、CSS3流星雨划过动画特效3.1 图片预览3.2 html代码3.3 style.css代码 三、CSS3流星雨划过动画特效 3.1 图片预览 3.2 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS3流星雨划过动画特效</title> <link rel="stylesheet" hr
HTML5 满天繁星+流星划过动画效果（CSS 动画）
卡尔特斯
01-29 2290
HTML5 满天繁星+流星划过动画效果（CSS 动画）
Less + HTML + JS实现流星划过星空动画
技术成长ing
01-05 3075
注：该动画主要来自https://100dayscss.com/?dayIndex=41这个网址，只是里面是 scss 实现的。本人比较 习惯 less ，就改用 less 了。 代码在本人 GitHub 上，GitHub地址：https://github.com/cao-lianhui/CSS100day/tree/master/stars-42 在这先说明没有 Less，记得先本地全...
HTML5流星划过背景动画特效.zip
07-04
此“HTML5流星划过背景动画特效”是一个利用HTML5技术来实现的动态视觉效果，旨在为网站增添一种梦幻且引人入胜的氛围。 在描述中提到的“静寂的夜空中，一道流星划过动画场景特效”，可以推断这个特效是通过HTML5...
HTML5流星划过背景动画特效特效代码
03-20
在这个特定的“HTML5流星划过背景动画特效特效代码”中，我们可以探讨HTML5如何用于创建动态视觉效果，尤其是流星划过的场景。 首先，HTML5引入了新的元素和API，如`<canvas>`元素，它为网页提供了画布，允许开发者...
html5 canvas山顶夜空流星划过背景动画特效
06-11
在这个特定的“html5 canvas山顶夜空流星划过背景动画特效”项目中，开发者利用Canvas API创建了一个生动的场景，其中包括移动的山体、繁星闪烁的夜空以及流星划过的壮观景象。 首先，我们要理解Canvas的基本结构。...
html5 canvas绘制的满天繁星流星划过背景动画特效源码.zip
11-02
在这个“满天繁星流星划过背景动画特效”中，我们可以看到HTML5 Canvas的应用及其相关的编程技巧。 首先，Canvas API是HTML5提供的一组JavaScript接口，用于在网页上动态绘制2D图形。通过Canvas元素，我们可以使用...
纯CSS3夜空流星划过背景特效
06-24
总的来说，纯CSS3夜空流星划过背景特效展示了CSS3在网页动画设计上的强大潜力，它允许开发者通过简单而优雅的方式创造出令人印象深刻的交互式体验，为用户带来独特的视觉享受。无论是在个人网站、社交媒体页面还是...
js面试题 高频(12-22题)
m0_63472757的博客
07-29 589
1.代码服用与抽象: 高阶函数可以将重复的逻辑抽象出来,形成通用函数,提高代码的复用性,柯李华可以将复杂的函数调用转化为一系列简单的步骤,便于部分应用和服用2.函数组合: 高阶函数和柯里化是构建函数式编程风格的关键,它们使的函数的组合变得更容易,从而构建更复杂的功能3.延迟执行与配置化: 柯里化可以将函数执行延迟到所有参数都传入后进行,同时允许在传入部分参数时进行配置,生成定制化的新函数。
echarts实现多个柱状图从右往左动态轮询
最新发布
wei80231996的博客
07-29 107
1.实现思路，默认截取数据前几项，例如截取前5项，然后根据定时器删除第一项，然后将原来的数据从第6个往数组push进去一个新的数据，一次类推。
vue3卡片垂直无限滚动
qq_63605379的博客
07-28 190
主要是利用css动画向上滚动，js动态计算dom上有多少条数据实时更新滚动速度。js 要在onMounted里调用确保dom已经被渲染。
Redis 键值对操作详解：Python 实现指南
AI浩
07-29 529
场景推荐操作替代方案添加小数据SETHSET（对象）添加大数据HSET/MSET分批次添加添加临时数据SETEX删除小数据DELETEUNLINK删除大数据UNLINK无批量操作管道 + MSET/UNLINK单独命令添加操作使用set()添加单个键值对使用mset()批量添加多个键值对使用setex()添加带过期时间的键值对删除操作优先使用unlink()进行删除（尤其大型数据）仅在需要立即释放内存时使用delete()批量删除时结合管道提高效率。
vue3的一些浅显用法
qswdcs1的专栏
07-27 243
success="handleUserFormSuccess" 是子页面成功后回调方法 父页面 实现 handleUserFormSuccess 方法。需要写个方法暴露给父组件，子页面实现 open 方法 相当于 初始加载类。其中 FieldUserForm 是子页面。2 子页面完成任务后 调用子页面 相关。1/ 父页面调用子页面相关。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值