快捷導(dǎo)航

使用snowfall.jquery.js實(shí)現(xiàn)愛心滿屏飛的效果

更新時(shí)間：2017年01月05日 09:51:44 作者：愛喝酸奶的吃貨

這篇文章主要介紹了使用snowfall.jquery.js實(shí)現(xiàn)愛心滿屏飛的效果的相關(guān)資料,需要的朋友可以參考下

小穎在上一篇一步一步教你用CSS畫愛心中已經(jīng)分享一種畫愛心的方法，這次再分享一種方法用css畫愛心，并利用snowfall.jquery.js實(shí)現(xiàn)愛心滿屏飛的效果。

第一步：

利用偽元素before和 :after畫兩個(gè)重疊在一起的長(zhǎng)方形，如圖所示：

<!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 屬性將兩個(gè)兩個(gè)偽元素分別旋轉(zhuǎn)負(fù)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 向左偏移一定像素，使兩個(gè)微元素部分重疊，組成愛心樣子，如圖所示：

.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);
  }

愛心我們畫完了，那么怎么讓愛心實(shí)現(xiàn)滿屏飛呢，其實(shí)只需要調(diào)用jquery.js和 snowfall.jquery.js就能實(shí)現(xiàn)，效果圖如下：

代碼如下：

<!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>
  //調(diào)用飄落函數(shù) 實(shí)現(xiàn)飄落效果
  $(document).snowfall({
   flakeCount: 50 //愛心的個(gè)數(shù)
  });
 </script>
</body>
</html>

其實(shí)小穎覺得愛心畫小一點(diǎn)比較好看，上面畫那么大其實(shí)是為了方便大家看愛心更明顯一些，小穎把愛心畫小后，就好看多了，效果圖如下：

小的愛心，需改變以下屬性的值：

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

以上所述是小編給大家介紹的使用snowfall.jquery.js實(shí)現(xiàn)愛心滿屏飛效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: