流星雨特效css3

最新推荐文章于 2023-11-07 23:55:38 发布

你的美，让我痴迷

最新推荐文章于 2023-11-07 23:55:38 发布

阅读量1.4k

点赞数 2

分类专栏： css 文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_45932157/article/details/123017724

版权

css 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				overflow: hidden;
			}
			section{
				position: absolute;
				top: 0;
				left: 0;
                width: 100%;
				height: 100vh;
				background: url(img/xingkong.jpg);
				background-position-x: center;
				background-size: cover;
				animation:  animateBg  5s  linear  infinite;
			}
			
			@keyframes animateBg{
				0%,100%{
					transform: scale(1);
				}
				50%{
					/* transform: scale(1.2); */
				}
			}
			
			span{
				position: absolute;
				top:50%;
				left:50%;
				width: 4px;
				height: 4px;
				background: #FFFFFF;
				border-radius: 50%;
				box-shadow: 0 0 0 4px  
				rgba(255,255,255,0.1),0 0 0 8px 
				rgba(255,255,255,0.1),0 0 20px 
				 rgba(255,255,255,1); 
				 animation: animate  3s  linear  infinite;
			}
			@keyframes animate{
				0%{
					transform: rotate(315deg)  translateX(-100px);
					opacity: 1;
				}
				70%{
					opacity: 1;
				}
				100%{
					transform:rotate(315deg)   translateX(-1000px);
					opacity:0;
				}
			}
			span::before{
				content: '';
				position: absolute;
				top:50%;
				transform: translateX(-50%);
				width: 200px;
				height: 1px;
				background: linear-gradient(90deg,#fff,transparent);
			}
			span:nth-child(1){
				top:0;
				right:0;
				left:initial;
				animation-delay: 0;
				animation-duration: 1s;
			}
			span:nth-child(2){
				top:0;
				right:80px;
				left:initial;
				animation-delay: 0.2s;
				animation-duration: 1s;
			}
			span:nth-child(3){
				top:80px;
				right:0px;
				left:initial;
				animation-delay: 0.4s;
				animation-duration: 2s;
			}
			span:nth-child(4){
				top:0;
				right:180px;
				left:initial;
				animation-delay: 0.6s;
				animation-duration: 1.5s;
			}
			span:nth-child(5){
				top:0;
				right:400px;
				left:initial;
				animation-delay: 0.8s;
				animation-duration: 2.5s;
			}
			span:nth-child(6){
				top:0;
				right:600px;
				left:initial;
				animation-delay: 1s;
				animation-duration: 3s;
			}
			span:nth-child(7){
				top:300px;
				right:0px;
				left:initial;
				animation-delay: 1.2s;
				animation-duration: 1.75s;
			}
			span:nth-child(8){
				top:0;
				right:700px;
				left:initial;
				animation-delay: 1.4s;
				animation-duration: 1.25s;
			}
			span:nth-child(9){
				top:0;
				right:900px;
				left:initial;
				animation-delay: 1.6s;
				animation-duration: 1s;
			}
			span:nth-child(10){
				top:0;
				right:110px;
				left:initial;
				animation-delay: 2.2s;
				animation-duration: 1.54s;
			}
		</style>
	</head>
	<body>
		<section>
			<span class="span"></span>
			<span class="span"></span>
			<span class="span"></span>
			<span class="span"></span>
			<span class="span"></span>
			<span class="span"></span>
			<span class="span"></span>
			<span class="span"></span>
			<span class="span"></span>
			<span class="span"></span>
		</section>
	</body>
</html>

x效果图：在这里插入图片描述

你的美，让我痴迷

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
1
评论
流星雨特效css3

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ overflow: hidden; } secti
复制链接

扫一扫