CSS3爱心飘落特效

效果就是这样,直接贴代码了,需要的插件可以去bootcnd找,也可以自己从网上下载,改个路径就行了

<style>
            /*#wrap{
                相对定位,限制绝对定位
                position: relative; 
                width: 300px;
                height: 300px;
                background-color: green;
                margin: 50px auto;
            }*/
            body{
                overflow: hidden;
                margin: 0 auto;
                background-image:url(img/84128-106.jpg);
            }
            .snowfall-flakes:before{
                content: "";
                /*绝对定位*/
                position: absolute;
                left:0px;
                top: 0px;
                width: 10px;
                height: 16px;
                transform: rotate(-45deg);
                background-color: red;
                border-radius: 5px 5px 1px 1px;
            }
            .snowfall-flakes:after{
                content: "";   /*激活伪元素的必要因素*/
                position: absolute;
                left:0px;
                top: 0px;
                width: 10px;
                height: 16px;
                transform: translateX(4.3px) rotate(45deg);
                background-color: red;
                border-radius: 5px 5px 1px 1px;
            }
        </style>
<div class="wrap"></div>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
        <script>
            $(document).snowfall({flakeCount : 100, maxSpeed :5});
        </script>

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以加QQ(2602138376)

文章标题:CSS3爱心飘落特效

文章字数:216

本文作者:Zevs

发布时间:2019-08-29, 09:01:09

最后更新:2019-08-29, 09:03:53

原始链接:http://zhsh666.xyz/2019/08/29/CSS3爱心飘落特效/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏

相册 图床 主题切换