利用snowfall.jquery.js实现爱心满屏飞或点点满屏飞

最新推荐文章于 2024-07-21 08:08:52 发布

allWords

最新推荐文章于 2024-07-21 08:08:52 发布

阅读量4.1k

点赞数

分类专栏： html 文章标签： javascript snowfall.jquery.js 伪类 html body

本文链接：https://blog.csdn.net/allWords/article/details/79331190

版权

html 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<title>HTML模板</title>
		<meta charset='utf-8'>
		<meta name='keywords' content=',,'>
		<meta name='description' content=''>
		<style>
			*{
			
				margin:0;
				padding:0;
			}
			/*
			#box{
				width:100px;
				height:100px;
				border:1px solid red;
			}
			#box div{
				width:19px;
				height:32px;
				background:red;
				border-radius:10px 10px 0 0;
			}
			#box .right{
				transform:translateX(14px) rotate(45deg);
			}
			#box .left{
				transform:translateY(-32px) translateX(4px) rotate(-45deg);
			}
			*/
			/*
				1. css3 属性 旋转 位移
				2. 定位
				3. 浮动
				4. display:元素转换
				5. 通过margin-top/left/right/bottom
				
				6. 伪类
				
			*/
			
			/* 爱心满天飞 */
			/*
			body,html{
				overflow:hidden;
				height:100%;
				background:black;
			}
			.snowfall-flakes:before,.snowfall-flakes:after{
				content:'';  /* 伪类必须添加content属性 */
				position:absolute;
				width:19px;
				height:32px;
				background:red;
				border-radius:10px 10px 0 0;
				transform:rotate(-45deg);
			}
			.snowfall-flakes:after{
				content:'';				
				left:9px;				
				transform:rotate(45deg);
			}
			*/
			
			/* 小点点满天飞 */
			body,html{
				overflow:hidden;
				height:100%;
				background:black;
			}
			.snowfall-flakes:before,.snowfall-flakes:after{
				content:'';
				position:absolute;
				width:1px;
				height:1px;
				background:red;
				border-radius:50%;
				transform:rotate(-45deg);
			}
			.snowfall-flakes:after{
				content:'';				
				left:9px;				
				transform:rotate(45deg);
			}
		</style>
	</head>
<body>
	
	<div id='box'>aa
		<!--
		<div class='right'></div>
		<div class='left'></div>
		-->
	</div>
	<!--
		div 块级标签               可以占据一行 设置宽高有用               
		span 行内标签 占自己的内容 可以占据一行 设置宽高没用
		display：inline-block ：行内块级标签，设置宽高有用，又能给span宽高
		
	-->
	<script src='jquery.min.js'></script>
	<script src='snowfall.jquery.js'></script>
	<script type='text/javascript'>	
		//调用飘落函数 实现飘落效果
		$(document).snowfall({
			flakeCount: 50 //个数
		});
	</script>
</body>
</html>


链接: https://pan.baidu.com/s/1oAqV9n8 密码: 9i7j