使用snowfall.jquery.js实现爱心满屏飞的效果

2019-11-19 18:08:07

字体：大中小

来源：转载

供稿：网友

小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法，这次再分享一种方法用css画爱心，并利用snowfall.jquery.js实现爱心满屏飞的效果。

第一步：

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

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style media="screen">  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;  } </style></head><body> <div class="heart-body">  <div class="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);   /* 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就能实现，效果图如下：

代码如下：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style media="screen">  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);  } </style></head><body> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/snowfall.jquery.js"></script> <script>  //调用飘落函数 实现飘落效果  $(document).snowfall({   flakeCount: 50 //爱心的个数  }); </script></body></html>

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

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

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

以上所述是小编给大家介绍的使用snowfall.jquery.js实现爱心满屏飞效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：jQuery解析返回的xml和json方法详解

下一篇：jQuery实现动态文字搜索功能