今天小编给大家分享一下怎么用JS代码实现情人节爱心满屏飘落特效的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

先看最终效果↓↓↓

前言：

文中效果是利用snowfall.jquery.js实现的，需要先引入jquery和snowfall.jquery.js。

snowfall.jquery.js下载地址：https://www.npmjs.com/package/jquery-snowfall

第一步：

利用伪元素before和 :after画两个重叠在一起的长方形，如图所示：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><stylemedia="screen">body{overflow-y:hidden;}.heart-body{width:500px;margin:100pxauto;position:relative;}.snowfall-flakes:before,.snowfall-flakes:after{content:"";position:absolute;left:0px;top:0px;display:block;width:30px;height:46px;background:red;border-radius:50px50px00;}</style></head><body><divclass="heart-body"><divclass="snowfall-flakes"></div></div></body></html>

第二步：

利用 transform 属性将两个两个伪元素分别旋转负45度、45度，如图所示：

.snowfall-flakes:before{-webkit-transform:rotate(-45deg);/*Safari和Chrome*/-moz-transform:rotate(-45deg);/*Firefox*/-ms-transform:rotate(-45deg);/*IE9*/-o-transform:rotate(-45deg);/*Opera*/transform:rotate(-45deg);}.snowfall-flakes:after{-webkit-transform:rotate(45deg);/*Safari和Chrome*/-moz-transform:rotate(45deg);/*Firefox*/-ms-transform:rotate(45deg);/*IE9*/-o-transform:rotate(45deg);/*Opera*/transform:rotate(45deg);}

第三步：

利用 left 属性，将伪元素 after 向左偏移一定像素，使两个微元素部分重叠，组成爱心样子，如图所示：

.snowfall-flakes:after{left:13px;-webkit-transform:rotate(45deg);/*Safari和Chrome*/-moz-transform:rotate(45deg);/*Firefox*/-ms-transform:rotate(45deg);/*IE9*/-o-transform:rotate(45deg);/*Opera*/transform:rotate(45deg);}

爱心我们画完了，那么怎么让爱心实现满屏飞呢，其实只需要调用jquery.js和 snowfall.jquery.js就能实现，效果图如下：

完整代码如下：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><stylemedia="screen">body{overflow:hidden;}.heart-body{width:500px;margin:100pxauto;position:relative;}.snowfall-flakes:before,.snowfall-flakes:after{content:"";position:absolute;left:0px;top:0px;display:block;width:30px;height:46px;background:red;border-radius:50px50px00;}.snowfall-flakes:before{-webkit-transform:rotate(-45deg);/*Safari和Chrome*/-moz-transform:rotate(-45deg);/*Firefox*/-ms-transform:rotate(-45deg);/*IE9*/-o-transform:rotate(-45deg);/*Opera*/transform:rotate(-45deg);}.snowfall-flakes:after{left:13px;-webkit-transform:rotate(45deg);/*Safari和Chrome*/-moz-transform:rotate(45deg);/*Firefox*/-ms-transform:rotate(45deg);/*IE9*/-o-transform:rotate(45deg);/*Opera*/transform:rotate(45deg);}.bgimg{position:fixed;top:0;left:0;width:100%;height:100%;min-width:1000px;z-index:-10;zoom:1;background-color:#fff;background:url(bgimg.jpg)no-repeat;background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-position:center0;}</style></head><body><scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"></script><scriptsrc="snowfall.jquery.js"></script><script>//调用飘落函数实现飘落效果$(document).snowfall({flakeCount:50//爱心的个数});$(window).resize(function(){//当浏览器大小变化时location.reload(true);});</script><divclass="bgimg"></div></body></html>

其实个人觉得爱心画小一点比较好看，上面画那么大其实是为了方便大家看爱心更明显一些，把爱心画小后的效果图如下：

小的爱心，需改变以下属性的值：

.snowfall-flakes:before,.snowfall-flakes:after{width:10px;height:16px;border-radius:10px10px00;}.snowfall-flakes:after{left:4px;}

粉色爱心场景图在下面，欢迎大家自取使用：

以上就是“怎么用JS代码实现情人节爱心满屏飘落特效”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。