欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用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è)重疊在一起的長方形,如圖所示:

<!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)站的支持!

相關(guān)文章

  • 學(xué)習(xí)JavaScript設(shè)計(jì)模式之享元模式

    學(xué)習(xí)JavaScript設(shè)計(jì)模式之享元模式

    這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的享元模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下
    2016-01-01
  • XML文件轉(zhuǎn)化成NSData對(duì)象的方法

    XML文件轉(zhuǎn)化成NSData對(duì)象的方法

    這篇文章主要介紹了XML文件轉(zhuǎn)化成NSData對(duì)象的方法,需要的朋友可以參考下
    2015-08-08
  • 實(shí)現(xiàn)只能輸入數(shù)字的input不用replace方法

    實(shí)現(xiàn)只能輸入數(shù)字的input不用replace方法

    只能輸入數(shù)字在以往都是使用replace方法實(shí)現(xiàn)的,在本文你將學(xué)習(xí)到不使用它依然可以實(shí)現(xiàn),具體代碼如下,感興趣的朋友可以參考下
    2013-09-09
  • javascript通過class來獲取元素實(shí)現(xiàn)代碼

    javascript通過class來獲取元素實(shí)現(xiàn)代碼

    javascript獲取元素有很多的方法,本文簡單的介紹下通過class獲取元素的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下,希望本文知識(shí)點(diǎn)可以幫助到你
    2013-02-02
  • JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能

    JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)

    Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)

    在使用bootstrap制作響應(yīng)式導(dǎo)航條時(shí),dropdown組件用的比較多,dropdown默認(rèn)鼠標(biāo)左鍵單擊才展開,如果使用鼠標(biāo)放上去(hover)就展開則會(huì)省去點(diǎn)擊時(shí)間,這樣能提高效率,下面小編給大家解答下實(shí)現(xiàn)思路
    2016-08-08
  • 細(xì)說webpack源碼之compile流程-rules參數(shù)處理技巧(1)

    細(xì)說webpack源碼之compile流程-rules參數(shù)處理技巧(1)

    webpack作為一種流行的打包工具被廣泛應(yīng)用在web項(xiàng)目的前端工程化構(gòu)建中。下面通過本文給大家介紹webpack源碼之compile流程-rules參數(shù)處理技巧,感興趣的朋友一起看看吧
    2017-12-12
  • Javascript動(dòng)畫效果(3)

    Javascript動(dòng)畫效果(3)

    這篇文章主要為大家詳細(xì)介紹了第三篇Javascript動(dòng)畫效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • Javascript Promise用法詳解

    Javascript Promise用法詳解

    這篇文章主要介紹了Javascript Promise用法詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • JavaScript jquery及AJAX小結(jié)

    JavaScript jquery及AJAX小結(jié)

    其實(shí)在學(xué)習(xí)之前,就已經(jīng)用上了js,jquery和ajax,不過當(dāng)時(shí)不清楚這些的區(qū)別,就全都當(dāng)成js來看,然后別人一說jquery,ajax都覺得好像很高級(jí),等到自己學(xué)習(xí)的時(shí)候,倒是對(duì)這些更清楚了一點(diǎn),下面就來寫一下我的總結(jié)
    2016-01-01

最新評(píng)論