使用snowfall.jquery.js實(shí)現(xià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ì)模式之享元模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的享元模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01XML文件轉(zhuǎn)化成NSData對(duì)象的方法
這篇文章主要介紹了XML文件轉(zhuǎn)化成NSData對(duì)象的方法,需要的朋友可以參考下2015-08-08實(shí)現(xiàn)只能輸入數(shù)字的input不用replace方法
只能輸入數(shù)字在以往都是使用replace方法實(shí)現(xiàn)的,在本文你將學(xué)習(xí)到不使用它依然可以實(shí)現(xiàn),具體代碼如下,感興趣的朋友可以參考下2013-09-09javascript通過class來獲取元素實(shí)現(xiàn)代碼
javascript獲取元素有很多的方法,本文簡單的介紹下通過class獲取元素的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下,希望本文知識(shí)點(diǎn)可以幫助到你2013-02-02JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星星等級(jí)評(píng)價(jià)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Bootstrap中的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)
webpack作為一種流行的打包工具被廣泛應(yīng)用在web項(xiàng)目的前端工程化構(gòu)建中。下面通過本文給大家介紹webpack源碼之compile流程-rules參數(shù)處理技巧,感興趣的朋友一起看看吧2017-12-12