今天小编给大家分享一下怎么用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代码实现情人节爱心满屏飘落特效”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。