css实现流星雨动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现流星雨动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body {
	background:radial-gradient(ellipse at bottom,#1b2735 0,#090a0f 100%);
	height:100vh;
	overflow:hidden;
	display:flex;
	font-family:"Anton",sans-serif;
	justify-content:center;
	align-items:center
}
.night {
	position:relative;
	width:100%;
	height:100%;
	transform:rotateZ(45deg)
}
.shooting_star {
	position:absolute;
	left:50%;
	top:50%;
	height:2px;
	background:linear-gradient(-45deg,#5f91ff,rgba(0,0,255,0));
	border-radius:999px;
	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
}
.shooting_star::before {
	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));
	transform:translateX(50%) rotateZ(45deg);
	border-radius:100%;
	-webkit-animation:shining 3000ms ease-in-out infinite;
	animation:shining 3000ms ease-in-out infinite
}
.shooting_star::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));
	transform:translateX(50%) rotateZ(45deg);
	border-radius:100%;
	-webkit-animation:shining 3000ms ease-in-out infinite;
	animation:shining 3000ms ease-in-out infinite;
	transform:translateX(50%) rotateZ(-45deg)
}
.shooting_star:nth-child(1) {
	top:calc(50% - 88px);
	left:calc(50% - 24px);
	-webkit-animation-delay:9532ms;
	animation-delay:9532ms
}
.shooting_star:nth-child(1)::before,.shooting_star:nth-child(1)::after {
	-webkit-animation-delay:9532ms;
	animation-delay:9532ms
}
.shooting_star:nth-child(2) {
	top:calc(50% - 169px);
	left:calc(50% - 83px);
	-webkit-animation-delay:6125ms;
	animation-delay:6125ms
}
.shooting_star:nth-child(2)::before,.shooting_star:nth-child(2)::after {
	-webkit-animation-delay:6125ms;
	animation-delay:6125ms
}
.shooting_star:nth-child(3) {
	top:calc(50% - -30px);
	left:calc(50% - 117px);
	-webkit-animation-delay:6014ms;
	animation-delay:6014ms
}
.shooting_star:nth-child(3)::before,.shooting_star:nth-child(3)::after {
	-webkit-animation-delay:6014ms;
	animation-delay:6014ms
}
.shooting_star:nth-child(4) {
	top:calc(50% - 129px);
	left:calc(50% - 31px);
	-webkit-animation-delay:1699ms;
	animation-delay:1699ms
}
.shooting_star:nth-child(4)::before,.shooting_star:nth-child(4)::after {
	-webkit-animation-delay:1699ms;
	animation-delay:1699ms
}
.shooting_star:nth-child(5) {
	top:calc(50% - -2px);
	left:calc(50% - 219px);
	-webkit-animation-delay:4576ms;
	animation-delay:4576ms
}
.shooting_star:nth-child(5)::before,.shooting_star:nth-child(5)::after {
	-webkit-animation-delay:4576ms;
	animation-delay:4576ms
}
.shooting_star:nth-child(6) {
	top:calc(50% - -69px);
	left:calc(50% - 67px);
	-webkit-animation-delay:5428ms;
	animation-delay:5428ms
}
.shooting_star:nth-child(6)::before,.shooting_star:nth-child(6)::after {
	-webkit-animation-delay:5428ms;
	animation-delay:5428ms
}
.shooting_star:nth-child(7) {
	top:calc(50% - 107px);
	left:calc(50% - 46px);
	-webkit-animation-delay:1842ms;
	animation-delay:1842ms
}
.shooting_star:nth-child(7)::before,.shooting_star:nth-child(7)::after {
	-webkit-animation-delay:1842ms;
	animation-delay:1842ms
}
.shooting_star:nth-child(8) {
	top:calc(50% - 158px);
	left:calc(50% - 122px);
	-webkit-animation-delay:9452ms;
	animation-delay:9452ms
}
.shooting_star:nth-child(8)::before,.shooting_star:nth-child(8)::after {
	-webkit-animation-delay:9452ms;
	animation-delay:9452ms
}
.shooting_star:nth-child(9) {
	top:calc(50% - 121px);
	left:calc(50% - 141px);
	-webkit-animation-delay:3937ms;
	animation-delay:3937ms
}
.shooting_star:nth-child(9)::before,.shooting_star:nth-child(9)::after {
	-webkit-animation-delay:3937ms;
	animation-delay:3937ms
}
.shooting_star:nth-child(10) {
	top:calc(50% - -35px);
	left:calc(50% - 77px);
	-webkit-animation-delay:9038ms;
	animation-delay:9038ms
}
.shooting_star:nth-child(10)::before,.shooting_star:nth-child(10)::after {
	-webkit-animation-delay:9038ms;
	animation-delay:9038ms
}
.shooting_star:nth-child(11) {
	top:calc(50% - 144px);
	left:calc(50% - 285px);
	-webkit-animation-delay:7676ms;
	animation-delay:7676ms
}
.shooting_star:nth-child(11)::before,.shooting_star:nth-child(11)::after {
	-webkit-animation-delay:7676ms;
	animation-delay:7676ms
}
.shooting_star:nth.........完整代码请登录后点击上方下载按钮下载查看