CSS3爱心飘落特效

前端开发 css

创建时间:2019-08-29 09:01

字数:216 阅读:

效果就是这样，直接贴代码了，需要的插件可以去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）