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

这篇博客做了一个爱心飘落的动图，给妈妈送去节日的祝福！

扬帆向海

63659人浏览 · 2020-05-09 15:16:53

扬帆向海 · 2020-05-09 15:16:53 发布

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

这博客是对自己学习的一点点总结及记录，如果您对 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>

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

点击可以直接获取

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

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平