纯css实现的流星雨的效果

最新推荐文章于 2024-06-28 18:43:04 发布
最新推荐文章于 2024-06-28 18:43:04 发布
阅读量5.9k 收藏 41
点赞数 8
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhooson/article/details/78006526
版权

查看效果
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0;
                background:#444444;
            }
            .space {
                width: 235px;
                height: 280px;
                margin:150px;
                background: #121212;
                float:left;
                overflow: hidden;
            }
            .space .star {
                display: block;
                width: 0px;
                height: 0px;
                border-radius: 50%;
                background: #fff;
                top: -50px;
                left:200px;
                position: relative;
                transform-origin: 100% 0;
                animation: star-ani 6s infinite ease-out;
                box-shadow: 0 0 0px 0px rgba(255, 255, 255, .3);
                opacity: 0;
                z-index: 2;
            }
            .space .star:after {
                content: '';
                display: block;
                top: -10px;
                left: 200px;
                border: 0px solid #fff;
                border-width: 0px 90px 3px 90px;
                border-color: transparent transparent transparent #fff;
                transform: rotate(-45deg) translate3d(1px, 3px, 0);
                box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
                transform-origin: 0% 100%;
                animation: shooting-ani 1s infinite ease-out;
            }




            .space .star1 {
                top: -10px;
                left: 300px;
                background: #fff;
                animation-delay: 0.5s;
                -webkit-animation-delay:0.5s;
                -moz-animation-delay: 0.5s;
            }
            .space .star1:after {
                border-color: transparent transparent transparent #fff;
                animation-delay: 0.5s;
                -webkit-animation-delay:0.5s;
                -moz-animation-delay: 0.5s;
            }
            .space .star2 {
                top: 100px;
                left: 200px;
                background: #fff;
                animation-delay: 0s;
                -webkit-animation-delay:0s;
                -moz-animation-delay: 0s;
            }
            .space .star2:after {
                border-color: transparent transparent transparent #fff;
                animation-delay: 0;
                -webkit-animation-delay:0s;
                -moz-animation-delay: 0s;
            }
            .space .star3 {
                top: -10px;
                left: 100px;
                background: #fff;
                animation-delay: 1.5s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay: 1.5s;
            }
            .space .star3:after {
                border-color: transparent transparent transparent #fff;
               animation-delay: 1.5s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay:1.5s;
            }
            .space .star4 {
                top: 100px;
                left: 250px;
                background: #fff;
                animation-delay: 1.5s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay: 1.5s;
            }
            .space .star4:after {
                border-color: transparent transparent transparent #fff;
               animation-delay: 1.5s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay:1.5s;
            }
            .space .star5 {
                top: 200px;
                left: 250px;
                background: #fff;
                animation-delay: 1.5s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay: 1.5s;
            }
            .space .star5:after {
               border-color: transparent transparent transparent #fff;
               animation-delay: 1.5s;
               -webkit-animation-delay: 1.5s;
               -moz-animation-delay: 1.5s;
            }
            .space .star6 {
                top: -10px;
                left: 100px;
                background: #fff;
                animation-delay: 1.5s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay: 1.5s;
            }
            .space .star6:after {
                border-color: transparent transparent transparent #fff;
               animation-delay: 1.5s;
                -webkit-animation-delay: 1.5s;
                -moz-animation-delay: 1.5s;
            }


            .space .star7 {
                top: 100px;
                left: 200px;
                background: #fff;
                animation-delay: 3s;
                -webkit-animation-delay:3s;
                -moz-animation-delay: 3s;
            }
            .space .star7:after {
                border-color: transparent transparent transparent #fff;
                animation-delay: 3s;
                -webkit-animation-delay:3s;
                -moz-animation-delay: 3s;
            }
            .space .star13 {
                top: -10px;
                left: 210px;
                background: #fff;
                animation-delay: 3s;
                -webkit-animation-delay:3s;
                -moz-animation-delay: 3s;
            }
            .space .star13:after {
                border-color: transparent transparent transparent #fff;
                animation-delay: 3s;
                -webkit-animation-delay:3s;
                -moz-animation-delay: 3s;
            }
            .space .star14 {
                top: -100px;
                left: 150px;
                background: #fff;
                animation-delay: 2s;
                -webkit-animation-delay:2s;
                -moz-animation-delay: 2s;
            }
            .space .star14:after {
                border-color: transparent transparent transparent #fff;
                animation-delay: 2s;
                -webkit-animation-delay:2s;
                -moz-animation-delay: 2s;
            }


            .space .star15 {
                top: 200px;
                left: 250px;
                background: #fff;
                animation-delay: 2.5s;
                -webkit-animation-delay:2.5s;
                -moz-animation-delay: 2.5s;
            }
            .space .star15:after {
                border-color: transparent transparent transparent #fff;
                animation-delay: 2.5s;
                -webkit-animation-delay:2.5s;
                -moz-animation-delay: 2.5s;
            }
            .space .star8 {
                top: -10px;
                left: 100px;
                background: #fff;
                animation-delay: 3s;
                -webkit-animation-delay: 3s;
                -moz-animation-delay: 3s;
            }
            .space .star8:after {
                border-color: transparent transparent transparent #fff;
               animation-delay: 3s;
                -webkit-animation-delay: 3s;
                -moz-animation-delay:3s;
            }
            .space .star9 {
                top: 100px;
                left: 250px;
                background: #fff;
                animation-delay: 4s;
                -webkit-animation-delay: 4s;
                -moz-animation-delay: 4s;
            }
            .space .star9:after {
                border-color: transparent transparent transparent #fff;
               animation-delay: 4s;
                -webkit-animation-delay: 4s;
                -moz-animation-delay:4s;
            }
            .space .star10 {
                top: 200px;
                left: 250px;
                background: #fff;
                animation-delay: 5s;
                -webkit-animation-delay: 5s;
                -moz-animation-delay: 5s;
            }
            .space .star10:after {
                border-color: transparent transparent transparent #fff;
               animation-delay: 5s;
                -webkit-animation-delay: 5s;
                -moz-animation-delay: 5s;
            }
            .space .star11 {
                top: -10px;
                left: 100px;
                background: #fff;
                animation-delay: 5s;
                -webkit-animation-delay: 5s;
                -moz-animation-delay: 5s;
            }
            .space .star11:after {
                border-color: transparent transparent transparent #fff;
               animation-delay: 5s;
                -webkit-animation-delay: 5s;
                -moz-animation-delay: 5s;
            }
            .space .star12 {
                top: -10px;
                left: 100px;
                background: #fff;
                animation-delay: 6s;
                -webkit-animation-delay: 6s;
                -moz-animation-delay: 6s;
            }
            .space .star12:after {
                border-color: transparent transparent transparent #fff;
               animation-delay: 6s;
                -webkit-animation-delay: 6s;
                -moz-animation-delay: 6s;
            }
            @keyframes star-ani {
                0% {
                    opacity: 0;
                    transform: scale(0) rotate(0) translate3d(0, 0, 0);
                    -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
                    -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
                }
                50% {
                    opacity: 1;
                    transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
                    -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
                    -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
                }
                100% {
                    opacity: 0;
                    transform: scale(1) rotate(0) translate3d(-400px, 300px, 0);
                    -webkit-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);
                    -moz-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);
                }
            }   
        </style>
    </head>
    <body>
        <div class="space">
            <div class="star"></div>
            <div class="star star1"></div>
            <div class="star star2"></div>
            <div class="star star3"></div>
            <div class="star star4"></div>
            <div class="star star5"></div>
            <div class="star star6"></div>
            <div class="star star7"></div>
            <div class="star star8"></div>
            <div class="star star9"></div>
            <div class="star star10"></div>
            <div class="star star11"></div>
            <div class="star star12"></div>
            <div class="star star13"></div>
            <div class="star star14"></div>
            <div class="star star15"></div>
        </div>
    </body>
</html>

纯css写的流星效果，有这几个缺点，节点应该循环出来，每个流星出来的时间，位置，大小等元素应该随机分配的，这几点后期慢慢优化

备注： 如您有更好的建议和效果展示，请留言，谢谢！！

zhooson
关注
专栏目录
css实现流星雨效果
神以灵的博客
05-28 2911
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
css3实现流星雨特效
loringray的博客
07-13 7577
用到css3知识: radial-gradient 径向渐变， filter，transform，animation以及 nth-child选择器等 html代码： <div class="container"> <div class="meteor"></div> <div...
CSS 流星雨
weixin_43506403的博客
05-28 704
流星雨 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
html中使用canvas实现流星雨特效
最新发布
GKISX1216的博客
06-28 379
html中使用canvas实现流星雨特效
css流星雨特效
qq_44025543的博客
11-07 1119
html
css3流星雨效果
09-06
css3流星雨动画简单版。适合css入门额新手 关键： animation+@keyframes、 伪元素、 transform+transform-origin。 关键部分有注释。
css 流星雨效果
东扯葫芦西扯瓜——前端小菜鸟的博客
11-28 497
css 流星雨效果 项目需要，根据UI提供的参考代码修改整理，在此和大家分享！ <!--流星雨--> <template> <div class="window" > <div class="stars" v-for="item in 2" :key="item"> <div class="star" v-for="star in 30" :key="`${star}star`"></div&g
纯CSS3流星雨划过动画特效特效代码
03-20
结合关键帧(@keyframes)规则，我们可以创建出复杂的动画序列，就像这个流星雨效果一样。 transform属性则是CSS3中的另一个重要工具，它允许我们对元素进行二维或三维的变换，如旋转、缩放、平移和倾斜。在这个流星...
纯CSS3实现发光流星动画特效
06-24
为了使动画看起来更自然，我们可以创建多个流星元素，每个元素的位置、大小、颜色和动画延迟都略有不同，这样流星就会从屏幕的不同位置随机出现，营造出更真实的流星雨效果。可以通过JavaScript随机生成这些属性，...
纯CSS3流星雨划过动画特效.zip
07-04
另一个文件"jiaoben6409"可能是源代码或者样例代码，可能是CSS样式表或者HTML结构的示例，用于展示如何实现流星雨动画的细节。 在实现纯CSS3流星雨动画特效的过程中，开发者可能采用了以下步骤： 1. 创建HTML结构：...
JS实现流星雨效果
qq_45921597的博客
09-26 666
【代码】JS实现流星雨效果。
代码流星雨
08-13
在DW中用html写的代码流星雨，简单实用，可以收藏一下
前端页面流星雨显示
03-13
网页前端页面显示流星雨
纯css3绘制可爱的发光流星动画特效
09-08
纯css3绘制可爱的发光流星动画特效
纯CSS3实现发光流星动画特效.zip
07-04
纯CSS3实现发光流星动画特效是一款可爱的发光流星CSS3动画效果。
【前端】流星雨（html +css）
weixin_45562037的博客
07-06 2570
【前端】流星雨（html +css）
CSS实现流星效果
soclear_的博客
06-27 908
【代码】CSS实现流星效果。
css流星
diaonangji4486的博客
01-10 191
<div class="night"> 　　<div class="shooting_star"></div> 　　<div class="shooting_star"></div> 　　<div class="shooting_star"></div> 　　<div class="sh...
Canvas流星雨特效
jingtian678的博客
04-05 2410
Canvas流星雨特效 *{margin: 0; padding: 0;} #canvas { background: #000; display: block; } 您的浏览器版本过低，请更换浏览器！ var can=document.getElementById('canvas'); var ctx=can.getContext('2d'); var w
CSS实现流星雨背景效果代码分享
该资源提供了一个纯CSS实现的流星雨背景效果，可以在网页或Vue页面中使用。项目托管在GitHub上，用户可以通过star来支持。它包含了一个预览图和具体的代码示例，用于展示如何在Vue模板中应用这个背景特效。 在CSS中...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值