流星特效

by jkhaoqi110

HTML

<div class="wrapper">
  <div class="meteor-1"></div>
  <div class="meteor-2"></div>
  <div class="meteor-3"></div>
  <div class="meteor-4"></div>
  <div class="meteor-5"></div>
  <div class="meteor-6"></div>
  <div class="meteor-7"></div>
  <div class="meteor-8"></div>
  <div class="meteor-9"></div>
  <div class="meteor-10"></div>
  <div class="meteor-11"></div>
  <div class="meteor-12"></div>
  <div class="meteor-13"></div>
  <div class="meteor-14"></div>
</div>

CSS

.wrapper {
  height: 100vh;
  width: 100vw;
  background-color: black;
}

.meteor-1 {
	-webkit-animation: meteor 5.7s linear infinite;
	animation: meteor 5.7s linear infinite;
	background-image: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
	height: 1px;
	left: 54%;
	pointer-events: none;
	position: fixed;
	top: 176px;
	width: 300px;
	z-index: 10
}

.meteor-1:before {
	background: hsla(0,0%,100%,.7);
	border-radius: 50%;
	box-shadow: 0 0 15px 3px #fff;
	content: "";
	height: 5px;
	margin-top: -2px;
	position: absolute;
	width: 4px
}

.meteor-2 {
	-webkit-animation: meteor 8.3s linear infinite;
	animation: meteor 8.3s linear infinite;
	background-image: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
	height: 1px;
	left: 63%;
	pointer-events: none;
	position: fixed;
	top: 95px;
	width: 300px;
	z-index: 10
}

.meteor-2:before {
	background: hsla(0,0%,100%,.7);
	border-radius: 50%;
	box-shadow: 0 0 15px 3px #fff;
	content: "";
	height: 5px;
	margin-top: -2px;
	position: absolute;
	width: 4px
}

.meteor-3 {
	-webkit-animation: meteor 7.6s linear infinite;
	animation: meteor 7.6s linear infinite;
	background-image: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
	height: 1px;
	left: 41%;
	pointer-events: none;
	position: fixed;
	top: 176px;
	width: 300px;
	z-index: 10
}

.meteor-3:before {
	background: hsla(0,0%,100%,.7);
	border-radius: 50%;
	box-shadow: 0 0 15px 3px #fff;
	content: "";
	height: 5px;
	margin-top: -2px;
	position: absolute;
	width: 4px
}

.meteor-4 {
	-webkit-animation: meteor 4.9s linear infinite;
	animation: meteor 4.9s linear infinite;
	background-image: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
	height: 1px;
	left: 76%;
	pointer-events: none;
	position: fixed;
	top: 272px;
	width: 300px;
	z-index: 10
}

.meteor-4:before {
	background: hsla(0,0%,100%,.7);
	border-radius: 50%;
	box-shadow: 0 0 15px 3px #fff;
	content: "";
	height: 5px;
	margin-top: -2px;
	position: absolute;
	width: 4px
}

.meteor-5 {
	-webkit-animation: meteor 4.3s linear...