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

拼搏现实的明天。 2023-03-13 02:07 9阅读 0赞

> **写在前面**： 我是「扬帆向海」，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。`技术是开源的、知识是共享的`。  
>   
> 这博客是对自己学习的一点点总结及记录，如果您对 *Java*、*算法* 感兴趣，可以关注我的动态，我们一起学习。  
>   
> `用知识改变命运，让我们的家人过上更好的生活`。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70_pic_center]

母亲节就要到了！ 坚守工作岗位的我们 满怀歉意 无法常回家看看，陪在妈妈的身边 在这里通过「爱心飘落」 给妈妈们送上 最真挚的祝福和感恩！

--------------------

![在这里插入图片描述][2020051020161230.gif_pic_center]

爱心飘落效果图

--------------------

#### 第 ① 步：使用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>

***效果图***：

![在这里插入图片描述][20200509144804998.png_pic_center]

#### 第②步：使用 `border-radius` 属性给div元素添加圆角的边框 ####

border-radius: 10px 10px 0 0;

***效果图：***

![在这里插入图片描述][20200509145325573.png_pic_center]

#### 第③步：使用 `transform` 属性将两个两个伪类元素分别旋转负45度、45度 ####

.lovefall:before {
        transform: rotate(-45deg);
    }
    
    .lovefall:after {
        transform: rotate(45deg);
    }

***效果图：***  
![在这里插入图片描述][20200509145353880.png_pic_center]

#### 第④步：使用 `left` 属性，将伪类元素 `：after` 向右进行偏移，让两个伪类元素部分重叠，组成爱心的形状 ####

left: 7px;

***效果图：***  
![在这里插入图片描述][20200509145432153.png_pic_center]

#### 第 ⑤ 步: 分别引入jquery.js和snowfall.jquery.js包 ####

#### 第 ⑥ 步：实现爱心飘落 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70_pic_center 1]

***完整代码：***

<!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>
        <script> $(function () { setTimeout(function () { $(document).snowfall({ flakeCount: 30, //设置爱心数目 flakeColor: 'none' }) }, 2000); }) </script>
    </body>
    
    </html>

【源码地址】：https://github.com/zhangxycg/snowfall.jquery.git

[点击可以直接获取][Link 1]

--------------------

***由于水平有限，博客中难免会有一些错误，有纰漏之处恳请各位大佬不吝赐教！***

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/0d58bf0dc48f48a5b7233af4e43b1eb5.png
[2020051020161230.gif_pic_center]: /images/20230312/8ed0563acca5462ea7e22a61f296f901.png
[20200509144804998.png_pic_center]: /images/20230312/ad52ecbabc9f467092df79baf27bbe1f.png
[20200509145325573.png_pic_center]: /images/20230312/6897053208c24275a40457544307d943.png
[20200509145353880.png_pic_center]: /images/20230312/06a4ec9483f349db9e2f03c9c7f4b152.png
[20200509145432153.png_pic_center]: /images/20230312/3fa26a680e884b5a9088eb89f3841d89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MDM2Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/fe550bb6951140619206ffcd0a35afc1.png
[Link 1]: https://github.com/zhangxycg/snowfall.jquery.git