写在前面： 我是「扬帆向海」，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。
技术是开源的、知识是共享的。
这博客是对自己学习的一点点总结及记录，如果您对 Java、算法 感兴趣，可以关注我的动态，我们一起学习。
用知识改变命运，让我们的家人过上更好的生活。
第 ① 步：使用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元素添加圆角的边框
border-radius: 10px 10px 0 0;
效果图：
第③步：使用 transform 属性将两个两个伪类元素分别旋转负45度、45度
.lovefall:before {
transform: rotate(-45deg);
}
.lovefall:after {
transform: rotate(45deg);
}
效果图：
第④步：使用 left 属性，将伪类元素 ：after 向右进行偏移，让两个伪类元素部分重叠，组成爱心的形状
left: 7px;
效果图：
第 ⑤ 步: 分别引入jquery.js和snowfall.jquery.js包
<script src="js/jquery.js"></script>
<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>
【源码地址】：https://github.com/zhangxycg/snowfall.jquery.git
点击可以直接获取
由于水平有限，博客中难免会有一些错误，有纰漏之处恳请各位大佬不吝赐教！
