利用snowfall.jquery.js实现满屏爱心表白代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用snowfall.jquery.js实现满屏爱心表白代码相关的知识，希望对你有一定的参考价值。
利用snowfall.jquery.js实现满屏爱心表白代码
一、效果展示
二、代码分析
第一步：利用伪元素before和 :after画两个重叠在一起的长方形，如图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body
overflow-y: hidden;
.heart-body
width: 500px;
margin: 100px auto;
position: relative;
.snowfall-flakes:before,
.snowfall-flakes:after
content: "";
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 30px;
height: 46px;
background: red;
border-radius: 50px 50px 0 0;
</style>
</head>
<body>
<div class="heart-body">
<div class="snowfall-flakes"></div>
</div>
</body>
</html>
第二步： 利用 transform 属性将两个两个伪元素分别旋转负45度、45度，如图所示：
.snowfall-flakes:before
-webkit-transform: rotate(-45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(-45deg);
/* Firefox */
-ms-transform: rotate(-45deg);
/* IE 9 */
-o-transform: rotate(-45deg);
/* Opera */
transform: rotate(-45deg);
.snowfall-flakes:after
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(45deg);
/* Firefox */
-ms-transform: rotate(45deg);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
第三步：利用 left 属性，将伪元素 after 向左偏移一定像素，使两个微元素部分重叠，组成爱心样子，如图所示：
.snowfall-flakes:after
left: 13px;
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(45deg);
/* Firefox */
-ms-transform: rotate(45deg);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
爱心我们画完了，那么怎么让爱心实现满屏飞呢，其实只需要调用jquery.js和 snowfall.jquery.js就能实现，效果图如下：
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body
overflow: hidden;
.heart-body
width: 500px;
margin: 100px auto;
position: relative;
.snowfall-flakes:before,
.snowfall-flakes:after
content: "";
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 30px;
height: 46px;
background: red;
border-radius: 50px 50px 0 0;
.snowfall-flakes:before
-webkit-transform: rotate(-45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(-45deg);
/* Firefox */
-ms-transform: rotate(-45deg);
/* IE 9 */
-o-transform: rotate(-45deg);
/* Opera */
transform: rotate(-45deg);
.snowfall-flakes:after
left: 13px;
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(45deg);
/* Firefox */
-ms-transform: rotate(45deg);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
</style>
</head>
<body>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/snowfall.jquery.js"></script>
<script>
//调用飘落函数 实现飘落效果
$(document).snowfall(
flakeCount: 50 //爱心的个数
);
</script>
</body>
</html>
改变爱心的大小，需改变以下属性的值：
.snowfall-flakes:before,
.snowfall-flakes:after
width: 10px;
height: 16px;
border-radius: 10px 10px 0 0;
.snowfall-flakes:after
left: 4px;
如果我的博客对你有帮助 请 “ 以上是关于利用snowfall.jquery.js实现满屏爱心表白代码的主要内容，如果未能解决你的问题，请参考以下文章