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

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

代码语言：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;
	tran.........完整代码请登录后点击上方下载按钮下载查看