canvas 实现流星雨特效

最新推荐文章于 2022-11-05 22:19:21 发布
最新推荐文章于 2022-11-05 22:19:21 发布
阅读量768 收藏 5
点赞数 3
分类专栏： canvas 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinyueyu007/article/details/117512514
版权

效果图：
在这里插入图片描述
代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
            height: 100vh;        /* == height: 100%  */
            overflow: hidden;
            font-family: 'Times New Roman', Times, serif;
            justify-content: center;
            align-items: center;
        }

        .container{
            position: relative;
            width: 100%;
            height: 100%;
            -webkit-transform: rotate(45deg);
            transform: rotateZ(45deg);
            -webkit-animation: sky 200000ms linear infinite;
            animation: sky 200000ms linear infinite;
        }

        .meteor{
            position: absolute;
            left: 50%;
            top: 50%;
            height: 2px;
            background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
            border-radius: 999px;
            -webkit-filter: drop-shadow(0 0 6px #699bff);
            filter: drop-shadow(0 0 6px #699bff);
            -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
            animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
        }

        .meteor::before, .meteor::after{
            content: '';
            position: absolute;
            top: calc(50% - 1px);
            right: 0;
            height: 2px;
            background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0) );
            -webkit-transform: translateX(50%) rotateZ(45deg);
            transform: translateX(50%) rotateZ(45deg);
            border-radius: 100%;
            -webkit-animation: shining 3000ms ease-in-out infinite;
            animation: shining 3000ms ease-in-out infinite;
        }

        .meteor::after{
            -webkit-transform: translateX(50%) rotateZ(-45deg);
            transform: translateX(50%) rotateZ(-45deg);
        }

        /* 1 */
        .meteor:nth-child(1){
            top: calc(50% - 185px);
            left: calc(50% - 150px);
            -webkit-animation-delay: 8888ms;
            animation-delay: 8888ms;
        }
        .meteor:nth-child(1)::before, .meteor:nth-child(1)::after, .meteor:nth-child(1)::after{
            -webkit-animation-delay: 8888ms;
            animation-delay: 8888ms;
        }
        /* 2 */
        .meteor:nth-child(2){
            top: calc(50% - 50px);
            left: calc(50% - 180px);
            -webkit-animation-delay: 9288ms;
            animation-delay: 9288ms;
        }
        .meteor:nth-child(2)::before, .meteor:nth-child(2)::after, .meteor:nth-child(2)::after{
            -webkit-animation-delay: 9288ms;
            animation-delay: 9288ms;
        }

        .meteor:nth-child(3){
            top: calc(50% - 145px);
            left: calc(50% - 135px);
            -webkit-animation-delay: 8600ms;
            animation-delay: 8600ms;
        }
        .meteor:nth-child(3)::before, .meteor:nth-child(3)::after, .meteor:nth-child(3)::after{
            -webkit-animation-delay: 8600ms;
            animation-delay: 8600ms;
        }

        .meteor:nth-child(4){
            top: calc(50% - 78px);
            left: calc(50% - 155px);
            -webkit-animation-delay: 3288ms;
            animation-delay: 3288ms;
        }
        .meteor:nth-child(4)::before, .meteor:nth-child(4)::after, .meteor:nth-child(4)::after{
            -webkit-animation-delay: 3288ms;
            animation-delay: 3288ms;
        }

        .meteor:nth-child(5){
            top: calc(50% - 183px);
            left: calc(50% - 8px);
            -webkit-animation-delay: 5588ms;
            animation-delay: 5588ms;
        }
        .meteor:nth-child(5)::before, .meteor:nth-child(5)::after, .meteor:nth-child(5)::after{
            -webkit-animation-delay: 5588ms;
            animation-delay: 5588ms;
        }

        .meteor:nth-child(6){
            top: calc(50% - 30px);
            left: calc(50% - 195px);
            -webkit-animation-delay: 9388ms;
            animation-delay: 9388ms;
        }
        .meteor:nth-child(6)::before, .meteor:nth-child(6)::after, .meteor:nth-child(6)::after{
            -webkit-animation-delay: 9388ms;
            animation-delay: 9388ms;
        }

        .meteor:nth-child(7){
            top: calc(50% - 95px);
            left: calc(50% - 70px);
            -webkit-animation-delay: 2588ms;
            animation-delay: 2588ms;
        }
        .meteor:nth-child(7)::before, .meteor:nth-child(7)::after, .meteor:nth-child(7)::after{
            -webkit-animation-delay: 2588ms;
            animation-delay: 2588ms;
        }

        .meteor:nth-child(8){
            top: calc(50% - 60px);
            left: calc(50% - 70px);
            -webkit-animation-delay: 5288ms;
            animation-delay: 5288ms;
        }
        .meteor:nth-child(8)::before, .meteor:nth-child(8)::after, .meteor:nth-child(8)::after{
            -webkit-animation-delay: 5288ms;
            animation-delay: 5288ms;
        }

        .meteor:nth-child(9){
            top: calc(50% - 75px);
            left: calc(50% - 250px);
            -webkit-animation-delay: 888ms;
            animation-delay: 888ms;
        }
        .meteor:nth-child(9)::before, .meteor:nth-child(9)::after, .meteor:nth-child(9)::after{
            -webkit-animation-delay: 888ms;
            animation-delay: 888ms;
        }

        .meteor:nth-child(9){
            top: calc(50% - 76px);
            left: calc(50% - 240px);
            -webkit-animation-delay: 2388ms;
            animation-delay: 2388ms;
        }
        .meteor:nth-child(9)::before, .meteor:nth-child(9)::after, .meteor:nth-child(9)::after{
            -webkit-animation-delay: 2388ms;
            animation-delay: 2388ms;
        }

        .meteor:nth-child(10){
            top: calc(50% - 85px);
            left: calc(50% - 6px);
            -webkit-animation-delay: 3588ms;
            animation-delay: 3588ms;
        }
        .meteor:nth-child(10)::before, .meteor:nth-child(10)::after, .meteor:nth-child(10)::after{
            -webkit-animation-delay: 3588ms;
            animation-delay: 3588ms;
        }

        .meteor:nth-child(11){
            top: calc(50% - 135px);
            left: calc(50% - 260px);
            -webkit-animation-delay: 2888ms;
            animation-delay: 2888ms;
        }
        .meteor:nth-child(11)::before, .meteor:nth-child(11)::after, .meteor:nth-child(11)::after{
            -webkit-animation-delay: 2888ms;
            animation-delay: 2888ms;
        }

        .meteor:nth-child(12){
            top: calc(50% - 15px);
            left: calc(50% - 8px);
            -webkit-animation-delay: 388ms;
            animation-delay: 388ms;
        }
        .meteor:nth-child(12)::before, .meteor:nth-child(12)::after, .meteor:nth-child(12)::after{
            -webkit-animation-delay: 388ms;
            animation-delay: 388ms;
        }

        .meteor:nth-child(13){
            top: calc(50% - 155px);
            left: calc(50% - 50px);
            -webkit-animation-delay: 7288ms;
            animation-delay: 7288ms;
        }
        .meteor:nth-child(13)::before, .meteor:nth-child(13)::after, .meteor:nth-child(13)::after{
            -webkit-animation-delay: 7288ms;
            animation-delay: 7288ms;
        }

        .meteor:nth-child(14){
            top: calc(50% - 28px);
            left: calc(50% - 80px);
            -webkit-animation-delay: 8888ms;
            animation-delay: 8888ms;
        }
        .meteor:nth-child(14)::before, .meteor:nth-child(14)::after, .meteor:nth-child(14)::after{
            -webkit-animation-delay: 8888ms;
            animation-delay: 8888ms;
        }

        .meteor:nth-child(15){
            top: calc(50% - 35px);
            left: calc(50% - 200px);
            -webkit-animation-delay: 7588ms;
            animation-delay: 7588ms;
        }
        .meteor:nth-child(15)::before, .meteor:nth-child(15)::after, .meteor:nth-child(15)::after{
            -webkit-animation-delay: 7588ms;
            animation-delay: 7588ms;
        }

        .meteor:nth-child(16){
            top: calc(50% - 40px);
            left: calc(50% - 250px);
            -webkit-animation-delay: 1888ms;
            animation-delay: 1888ms;
        }
        .meteor:nth-child(16)::before, .meteor:nth-child(16)::after, .meteor:nth-child(16)::after{
            -webkit-animation-delay: 1888ms;
            animation-delay: 1888ms;
        }


        @-webkit-keyframes tail{
            0%{
                width: 0;
            }
            30%{
                width: 100px;
            }
            100%{
                width: 0;
            }
        }
        @keyframes tail{
            0%{
                width: 0;
            }
            30%{
                width: 100px;
            }
            100%{
                width: 0;
            }
        }

        @-webkit-keyframes shining{
            0%{
                width: 0;
            }
            50%{
                width: 30px;
            }
            1000%{
                width: 0;
            }
        }
        @keyframes shining{
            0%{
                width: 0;
            }
            50%{
                width: 30px;
            }
            1000%{
                width: 0;
            }
        }

        @-webkit-keyframes shooting{
            0%{
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            100%{
                -webkit-transform: translateX(300px);
                transform: translateX(300px);
            }
        }
        @keyframes shooting{
            0%{
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            100%{
                -webkit-transform: translateX(300px);
                transform: translateX(300px);
            }
        }

        @-webkit-keyframes sky{
            0%{
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            100%{
                -webkit-transform: rotate(405deg);
                transform: rotate(405deg);
            }
        }
        @keyframes sky{
            0%{
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            100%{
                -webkit-transform: rotate(405deg);
                transform: rotate(405deg);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>
    <div class="meteor"></div>

</div>
</body>
</html>
音乐宇
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue2流星雨（可调角度）
m0_46961166的博客
05-17 407
新建StarBackground.vue组件。在需要使用的页面引用。
canvas实现流星雨的背景效果
08-31
在本文中，我们将深入探讨如何使用HTML5的canvas元素来实现一个动态的流星雨背景效果。canvas是一个强大的图形渲染工具，允许开发者通过JavaScript在网页上绘制2D图形。以下是你需要了解的关键知识点： 1. **Canvas...
html5 canvas流星雨星星动画特效.zip
07-04
html5 canvas流星雨星星动画特效是一款简短的动画特效，流星雨动画，星星动画特效。
撩妹技能 get，教你用 canvas 画一场流星雨
祈澈菇凉
11-05 547
开始妹子都喜欢流星，如果她说不喜欢，那她一定是一个假妹子。现在就一起来做一场流星雨，用程序员的野路子浪漫一下。要画一场流星雨，首先，自然我们要会画一颗流星。玩过 canvas 的同学，你...
Canvas流星雨特效
jingtian678的博客
04-05 2400
Canvas流星雨特效 *{margin: 0; padding: 0;} #canvas { background: #000; display: block; } 您的浏览器版本过低，请更换浏览器！ var can=document.getElementById('canvas'); var ctx=can.getContext('2d'); var w
canvas流星雨网页h5动画
ICode联盟
06-17 248
下载地址基于canvas实现的流星雨动态网页h5动画dd:
canvas绘制流星雨
zh08150815的博客
11-05 395
流星雨
梦幻流星雨Canvas特效
07-24
在这个流星雨特效中，每个流星实际上是由一系列粒子组成的，这些粒子以特定的速度和轨迹移动，形成流星划过天空的效果。粒子系统的运用是关键，通过调整粒子的生命周期、速度、方向和颜色，可以创造出不同形态的流星...
html5 canvas流星雨星星动画特效特效代码
03-20
这款"html5 canvas流星雨星星动画特效特效代码"是利用Canvas API创建的一种视觉效果，它能模拟出流星雨和星星在夜空中闪烁的动态场景，为网页增添趣味性和观赏性。 1. **HTML5 Canvas基本概念** HTML5 Canvas通过...
使用html+CSS实现流星雨特效，可以直接在编辑器中运行或者在浏览器中打开，十分的炫酷
06-30
总结来说，这个HTML+CSS+JavaScript的流星雨特效项目展示了Web前端开发中的动态效果实现。通过HTML创建页面结构，CSS进行样式控制，JavaScript处理动画逻辑，我们可以构建出引人入胜的交互式网页元素。对于初学者来...
canvas流星雨
weixin_60553942的博客
09-02 115
html5 canvas一起去看流星雨星星动画特效
09-08
html5 canvas一起去看流星雨星星动画特效
html5 canvas流星雨星星动画特效代码
06-12
html5 canvas流星雨星星动画特效代码是一款简短的动画特效，流星雨动画，星星动画特效。
Canvas星星跟流星背景动画特效
06-24
Canvas星星跟流星背景动画特效是一款基于HTML5 Canvas实现的满天繁星动画特效。
用canvas实现流星特效
weixin_34376562的博客
06-24 1136
最近给公司网站banner做了流星特效，踩了一些坑，在这里mark下。 (function () { var context;//画布上下文 var boundaryHeight;//画布高，边界值 var boundaryWidth;//画布宽，边界值 var starArr = []; var meteorArr = []; var STA...
html5 流星雨,canvas简单流星雨
weixin_39569051的博客
07-02 187
function lx(obj) {this.Id = obj.id;this.src = obj.src; //图片地址this.img = ''; //图片this.cxt = ''; //canvas实例this.Time = ""; //定时器控制流星运动this.Time2 = ""; //定时器创建流星this.sum = 500; //流星出现频率this.beginIpY = []...
html5流星雨,HTML5/Canvas 3D流星雨/散射特效
weixin_39929254的博客
06-22 249
JavaScript语言：JaveScriptBabelCoffeeScript确定var myCanvas = document.getElementById('myCanvas');var ctx = myCanvas.getContext('2d');myCanvas.width = innerWidth;myCanvas.height = innerHeight;window.onresi...
H5 canvas流星特效
最新发布
06-06
好的，我可以为您提供关于H5 Canvas流星特效的一些指导。 首先，您需要在HTML文件中创建一个canvas元素，以便在其中绘制流星效果。然后，您可以使用JavaScript来编写代码，实现流星效果。 以下是一个简单的流星特效的实现代码示例： ```javascript // 获取canvas元素 var canvas = document.getElementById('myCanvas'); // 设置canvas的宽度和高度 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 获取画布的上下文对象 var ctx = canvas.getContext('2d'); // 创建流星对象 function Meteor(x, y, dx, dy, size, color) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.size = size; this.color = color; // 绘制流星 this.draw = function() { ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this.x + this.size, this.y - this.size); ctx.strokeStyle = this.color; ctx.stroke(); } // 更新流星的位置 this.update = function() { this.x += this.dx; this.y += this.dy; } } // 创建多个流星对象并加入数组 var meteors = []; for (var i = 0; i < 10; i++) { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var dx = -1 - Math.random(); var dy = 1 + Math.random(); var size = 10 + Math.random() * 20; var color = 'white'; var meteor = new Meteor(x, y, dx, dy, size, color); meteors.push(meteor); } // 动画循环 function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制每一个流星 for (var i = 0; i < meteors.length; i++) { var meteor = meteors[i]; meteor.draw(); meteor.update(); } } // 开始动画循环 animate(); ``` 在这个代码示例中，我们创建了一个Meteor类来表示流星对象，并使用它来绘制和更新每一个流星。我们还创建了一个包含多个流星对象的数组，并在动画循环中使用它来绘制和更新每一个流星。 请注意，这只是一个简单的流星特效实现，您可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值