母亲节不能陪在妈妈身边，我用css和js给妈妈做了一个爱心飘落

写在前面：我是「扬帆向海」，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。

这博客是对自己学习的一点点总结及记录，如果您对 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({flakeCount: 30, //设置爱心数目flakeColor: 'none'})}, 2000);})</script>
</body></html>