爱心飘落效果实现

最新推荐文章于 2024-04-21 01:29:41 发布

么心么肺

最新推荐文章于 2024-04-21 01:29:41 发布

阅读量523

点赞数 3

分类专栏： CSS+CSS3

本文链接：https://blog.csdn.net/weixin_41545048/article/details/107488376

版权

CSS+CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<style>
        html,
        body {
            margin: 0;
            background-image: url("./images/1.jpg");
            /* 背景图片按地址 */
            overflow: hidden;
        }
        
        .snowfall-flakes {
            margin: 20px auto;
            /* background-color: #096; */
            position: relative;
        }
        
        .snowfall-flakes:before,
        .snowfall-flakes:after {
            width: 10px;
            height: 16px;
            background-color: red;
            border-radius: 5px 5px 0 0;
            position: absolute;
            top: 0;
            left: 0
        }
        
        .snowfall-flakes:before {
            content: "";
            transform: rotate(-45deg)
        }
        
        .snowfall-flakes:after {
            content: "";
            transform: translate(4.5px) rotate(45deg);
        }
    </style>

<body>
	<!-- 这里类名一定要使用snowfall.js提供的类名 snowfall-flakes-->
    <div class="snowfall-flakes"></div>
    <!-- 引入第三方库 -->
    <script src="./js/jquery.js"></script> 
    <script src="./js/snowfall.js"></script>
    <script>
        $(document).snowfall({
            flakeCount: 100,
            maxSpeed: 10,
        });
    </script>
</body>

么心么肺

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
爱心飘落效果实现

<style> html, body { margin: 0; background-image: url("./images/1.jpg"); overflow: hidden; } .snowfall-flakes { margin: 20px auto; /* background-col.
复制链接

扫一扫