满屏飞舞的⼼HTML动画，使⽤snowfall.jquery.js实现爱⼼满屏
飞的效果
⼩颖在上⼀篇⼀步⼀步教你⽤CSS画爱⼼中已经分享⼀种画爱⼼的⽅法，这次再分享⼀种⽅法⽤css画爱⼼，并利⽤snowfall.jquery.js实现爱⼼满屏飞的效果。
第⼀步：
利⽤伪元素before和 :after画两个重叠在⼀起的长⽅形，如图所⽰：
body {
overflow-y: hidden;
}
.heart-body {
width: 500px;
margin: 100px auto;
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: 50px 50px 0 0;
}
第⼆步：
利⽤ transform  属性将两个两个伪元素分别旋转负45度、45度，如图所⽰：
.snowfall-flakes:before {
-webkit-transform: rotate(-45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(-45deg);
/
* Firefox */
-ms-transform: rotate(-45deg);
/* IE 9 */
-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);
/* IE 9 */
-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);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
}
爱⼼我们画完了，那么怎么让爱⼼实现满屏飞呢，其实只需要调⽤jquery.js和 snowfall.jquery.js就能实现，效果图如下：
代码如下：
body {
overflow: hidden;
}
.heart-body {
width: 500px;
margin: 100px auto;
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: 50px 50px 0 0;
}
.snowfall-flakes:before {
-webkit-transform: rotate(-45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(-45deg);
/* Firefox */
-ms-transform: rotate(-45deg);
/
* IE 9 */
-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);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
}
//调⽤飘落函数 实现飘落效果
js文字动画特效$(document).snowfall({
flakeCount: 50 //爱⼼的个数
});
其实⼩颖觉得爱⼼画⼩⼀点⽐较好看，上⾯画那么⼤其实是为了⽅便⼤家看爱⼼更明显⼀些，⼩颖把爱⼼画⼩后，就好看多了，效果图如下：
⼩的爱⼼，需改变以下属性的值：
.snowfall-flakes:before,
.snowfall-flakes:after {
width: 10px;
height: 16px;
border-radius: 10px 10px 0 0;
}
.snowfall-flakes:after {
left: 4px;
}
以上所述是⼩编给⼤家介绍的使⽤snowfall.jquery.js实现爱⼼满屏飞效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。