CSS3动画：实现红包雨

HaanLen

已于 2022-07-05 20:37:15 修改

阅读量2.3k

点赞数

分类专栏： JavaScript案例文章标签： css

于 2019-11-15 20:45:33 首次发布

本文链接：https://blog.csdn.net/weixin_40119412/article/details/103092051

版权

JavaScript案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现效果图

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/hongbao.css" />
	</head>
	<body>
		<div class="content">
			<div class="yudi"></div>
		</div>
	</body>
	<script src="../js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
		let $content=$('.content');
		let initNumber=0;
		for(let i=0;i<30;i++){
			let lefts=Math.floor(Math.random()*5+2);
			let delay=Math.floor(Math.random()*50+2);
			initNumber+=lefts;
			let $div=$('<div/>').addClass('yudi').css({
				"left":`${initNumber}%`,
				"top":`${lefts}%`,
				"animation-delay":`${delay/10}s`
			});
			$content.append($div);
		}
	</script>
</html>

css


html,body{
	height: 100%;
	width: 100%;
}

.content{
	position: relative;
	height: 100%;
	background:black;
	overflow: hidden;
}	
.yudi{
	position:absolute;
	width: 60px;
	height: 60px;
	background: url(../img/红包.PNG) no-repeat;
	background-size:auto 60px ;
	animation: drops 1.5s ease-in infinite;
	}
@keyframes drops{
	from{opacity: 0;}
	20%{opacity: 1;}
	90%{opacity: 1;}
	to{opacity: 0;transform: translate3d(100px ,100vh,-100px);}
}

源码下载地址：GitHub - hannah-lin-sama/rain: 红包雨

HaanLen

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画：实现红包雨

实现效果图html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/hongbao.css" /> </head>...
复制链接

扫一扫

专栏目录