通过css和js实现流星雨效果

版权声明：1.版权归原作者Moment ° 回忆 ✨所有； 2.未经原作者允许不得转载本文内容，否则将视为侵权； 3.转载或者引用本文内容请注明来源及原作者； 4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。 https://blog.csdn.net/qq_35366269/article/details/89158198

页面代码：

<template>
  <div >
    ============================流星雨============================
    <div class="title">
      <div id="stars"></div>
    </div>
  </div>
</template>

<script>
  import "./css/style.css"
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){  
    this.shootingStar();
  },
  methods:{
    shootingStar: function () {
      let stars = document.getElementById('stars')
      let star = document.getElementsByClassName('star')

// js随机生成流星
      for (let j = 0; j < 30; j++) {
        let newStar = document.createElement("div")
        newStar.className = "star"
        newStar.style.top = randomDistance(30, -30) + 'px'
        newStar.style.left = randomDistance(150, 20) + 'px'
        stars.appendChild(newStar)
      }

// 封装随机数方法
      function randomDistance(max, min) {
        let distance = Math.floor(Math.random() * (max - min + 1) * 20 + min)
        return distance
      }

// 给流星添加动画延时
      for (let i = 0, len = star.length; i < len; i++) {
        if (i % 3 == 0) {
          star[i].style.animationDelay = '0s'
        } else {
          star[i].style.animationDelay = i * 0.5 + 's'
        }
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .title {
    background: url(//16129268.s61i.faiusr.com/4/AD0I9LnYBxAEGAAg7feE1AUo27qTMTCADzjeAg.png) 50% 50% no-repeat;
    background-size: cover;
    height: 1000px;
  }
</style>

CSS代码：

body{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
#g_main{
  background-color: rgb(0,0,0);
  background-attachment: scroll;
}
.topHeader{
  position: relative;
  border-bottom: 4px solid rgb(74,179,68);
}
.fk-elemZoneBg{
  width: 1000px;
  margin: auto;
  display: flex;
}
.newPrimaryTitle{
  float: left;
  font-size: 30px;
  font-weight: bold;
  padding: 20px 0 20px 20px;
}
.navContent {
  display: flex;
  justify-content: space-around;
  width: 750px;
  padding: 0 10px;
}
.navContent li{
  font-size: 19px !important;
}
.navContent li a:hover{
  color: rgb(74, 179, 68);
}
.navMainContent{
  width: auto;
  color: #fff;
  float: right;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
.navContent li{
  font-size: 20px;
  display: inline-block;
  /*margin-left: 60px;*/
  margin-top: 10px;
}
.navContent li a{
  color: #fff;
  display: inline-block;
}
.webBanner {
  /*position: relative;*/
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 0;
}
.form303{
  position: absolute;
  top: 80px;
  left: 100px;
  color:#4ab344;
}
.form304{
  position: absolute;
  top: 110px;
  left: 70px;
  width: 300px;
  min-height: 40px;
  font-size: 50px;
  color: aliceblue;
}
.form305{
  position: absolute;
  top: 250px;
  left: 0px;
  width: 500px;
  min-height: 40px;
  font-size: 16px;
  line-height: 35px;
}
.webContent{
  background-color: rgb(0,0,0);
}
.floatImgWrap{
  padding-top: 30px;
  text-align: center;
}
.formBanner311{
  color: #fff;
  font-size: 30px;
}
.dividingLine{
  color: #4ab344;
}
.f-packContent {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  /*height: 265px;*/
}
.icon{
  width: 140px;
  height: 140px;
}
.iconfont{
  font-size: 50px !important;
  position: relative;
  top: 15px;
}
.textSpan{
  font-size: 16px;
  color: #fff;
  margin-top: 17px;
  display: block;
}
.form312{
  position: relative;
  top: 20px;
  /*left: 50px;*/
  /*width: 200px;*/
  /*height: 200px;*/
  animation: none 0s ease 0s 1 normal none running;
}
.elemZone{
  float: left;
  margin-left: 10px;
  min-width: 10%;
  /*width: 240px;*/
  position: relative;
}

#stars {
  margin: 0 auto;
  width: 100%;
  position: absolute;
  top: -916px;
  left: -1200px;
  z-index: 2;
}

/**
  流星雨动画的布局
**/
.star {
  display: block;
  width: 1px;
  background: transparent;
  position: relative;
  opacity: 0;
  /*过渡动画*/

  animation: star-fall 3s linear infinite;
  -webkit-animation: star-fall 3s linear infinite;
  -moz-animation: star-fall 3s linear infinite;
}
.star:after {
  content: '';
  display: block;
  border: 0px solid #fff;/*#fff*/
  border-width: 0px 200px 2px 200px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .9);/*rgba(255, 255, 255, .9)*/
  box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
  /*变形*/

  transform: rotate(-45deg) translate3d(1px, 3px, 0);
  -webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
  -moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
  transform-origin: 0% 100%;
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
}
@keyframes star-fall {
  0% {
    opacity: 0;
    transform: scale(0.5) translate3d(0, 0, 0);
    -webkit-transform: scale(0.5) translate3d(0, 0, 0);
    -moz-transform: scale(0.5) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(-200px, 200px, 0);
    -webkit-transform: translate3d(-200px, 200px, 0);
    -moz-transform: translate3d(-200px, 200px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1.2) translate3d(-300px, 300px, 0);
    -webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);
    -moz-transform: scale(1.2) translate3d(-300px, 300px, 0);
  }
}
.swiper-wrapper{
  height: 540px !important;
}
.swiper-pagination-bullet {
  width: 50px !important;
  height: 6px !important;
  display: inline-block !important;
  background: #fff !important;
  border-radius: 0px !important;
}


.round{
  width: 130px;
  height: 130px;
  border-radius: 100%;
  border: 1px solid #666;
  margin-bottom: 40px;
  margin-left: 35px;
}
.round-1{
  width: 110px;
  height: 110px;
  border-radius: 100%;
  border: 1px solid #333;
  margin-top: 8px;
  margin-left: 10px;
}


/*
清除浮动
*/
.clearFix::before,
.clearFix::after{
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}


.product-introduction {
  width: 200px;
  color: #666666;
  font-size: 14px;
}

.theme-color {
  background-color: rgb(0,0,0);
}


.module302 {
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding-top: 25px;
  padding-bottom: 25px;
  text-align: center;
}


.mT_100 {
  margin-top: 100px;
}

.about-us {
  width: 70%;
  margin: 0 auto;
  background-color: #191A1B;
  border-radius: 5px;
  color: rgb(153, 153, 153);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 70px;
  padding-right: 50px;
  font-size: 14px;


}

.f_left{
  float: left;
}
.f_right{
  float: right;
}


.company-description {
  width: 50%;
  /*height: 190px;*/
  text-align: left;
  padding-top: 40px;
  text-indent: 2em;
}

.company-icon {
  width: 50%;
  text-align: right;
}

.company-icon img {
  width: 341px;
  height: 230px;

}

效果图：

源码地址：https://github.com/591774192/MeteorShower