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

最新推荐文章于 2023-05-14 10:11:41 发布

扬帆向海

最新推荐文章于 2023-05-14 10:11:41 发布

阅读量6.3w

点赞数 298

分类专栏：前端文章标签： snowfall 母亲节爱心飘落 jquery snowfall.jquery

本文链接：https://blog.csdn.net/weixin_43570367/article/details/106018731

版权

前端专栏收录该内容

9 篇文章 4 订阅

订阅专栏

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

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