写在前面： 我是「扬帆向海」，这个暱称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。
技术是开源的、知识是共享的。
这博客是对自己学习的一点点总结及记录，如果您对 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
由于水平有限，博客中难免会有一些错误，有纰漏之处恳请各位大佬不吝赐教！