满屏飞舞的心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);

}

//调用飘落函数 实现飘落效果

$(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实现爱心满屏飞效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！