小穎在上一篇一步一步教你用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; }
希望小穎的分享大家喜歡哦，嘻嘻，下班嘍，小穎要回家嘍