母亲节不能陪在妈妈身边,我用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>

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

点击可以直接获取


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

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页