用知识改变命运，让我们的家人过上更好的生活。
母亲节就要过去了！坚守工作岗位的我们满怀歉意无法常回家看看，陪在妈妈的身边在这里通过「爱心飘落」给妈妈们送上最真挚的祝福和感恩！
爱心飘落效果图
第 ① 步：使用CSS中的伪类元素 :before和 :after画两个重叠在一起的红色长方形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.heart {
width: 400px;
margin: 100px auto;
position: relative;
}
.lovefall:before,
.lovefall:after {
content: "";
position: absolute;
width: 20px;
height: 30px;
display: block;
background: red;
}
</style>
</head>
<body>
<div class="heart">
<div class="lovefall"></div>
</div>
</body>
</html>
效果图：
第②步：使用 border-radius 属性给div元素添加圆角的边框
1.border-radius: 10px 10px 0 0;
效果图：
第③步：使用 transform 属性将两个两个伪类元素分别旋转负45度、45度
1..lovefall:before {
2.transform: rotate(-45deg);
3.}
4.
5..lovefall:after {
6.transform: rotate(45deg);
7.}
效果图：
第④步：使用 left 属性，将伪类元素 ：after 向右进行偏移，让两个伪类元素部分重叠，组成爱心的形状
1.left: 7px;
效果图：
第 ⑤ 步: 分别引入jquery.js和snowfall.jquery.js包
1.<script src="js/jquery.js"></script>
2.<script src="js/snowfall.jquery.js"></script>
第 ⑥ 步：实现爱心飘落
<script>
$(function () {
setTimeout(function () {
$(document).snowfall({
falkeCount: 520, //设置爱心数目
flakeColor: 'none'
})
}, 2000);
})
</script>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>给妈妈的爱</title></title>
<script src="js/jquery.js"></script>
<script src="js/snowfall.jquery.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
.heart {
width: 400px;
margin: 100px auto;
position: relative;
}
.snowfall-flakes:before,
.snowfall-flakes:after {
content: "";
position: absolute;
width: 20px;
height: 30px;
display: block;
background: red;
border-radius: 10px 10px 0 0;
}
.snowfall-flakes:before {
transform: rotate(-45deg);
}
.snowfall-flakes:after {
transform: rotate(45deg);
left: 7px;
}
body {
overflow: hidden;
background: url("images/mother.jpg");
background-position: center;
background-size: 50%;
background-repeat: no-repeat;
}
body,
html {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="heart">
<!-- <div class="lovefall"></div> -->
</div>
<script>
$(function () {
setTimeout(function () {
$(document).snowfall({
falkeCount: 520, //设置爱心数目
flakeColor: 'none'
})
}, 2000);
})
</script>
</body>
</html>
由于水平有限，文章中难免会有一些错误，有纰漏之处恳请各位大佬不吝赐教！
源码获取方式：关注小编，然后转发文章，私信小编：学习 即可
