代碼不是很長，效果還是很不錯的，鼠標點擊之后會出現一堆星星，話不多說，我們來看代碼是什么樣的。

　　html代碼如下：

　　<div class="container">

　　<svg class="heartrain" xmlns="https://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800">

　　<defs>

　　<path id="stars" d="M12.76 15.64l-1.26 3.36-1.26-3.36-2.24-0.64 2.24-0.64 1.26-3.36 1.26 3.36 2.24 0.64-2.24 0.64zM22.714 9.238l-1.214-3.238-1.214 3.238-2.286 0.762 2.286 0.762 1.214 3.238 1.214-3.238 2.286-0.762-2.286-0.762zM20.714 21.238l-1.214-3.238-1.214 3.238-2.286 0.762 2.286 0.762 1.214 3.238 1.214-3.238 2.286-0.762-2.286-0.762zM13.459 13.486l-1.959-5.487-1.959 5.487-4.541 1.514 4.541 1.514 1.959 5.486 1.959-5.486 4.541-1.514-4.541-1.514z"></path>

　　</defs>

　　<g class="pContainer">

　　</g>

　　</svg>

　　</div>

　　css代碼如下：

　　body {

　　background-color:#FFF;

　　overflow:hidden;

　　}

　　body,

　　html {

　　height: 100%;

　　width: 100%;

　　margin: 0;

　　padding: 0;

　　}

　　.container{

　　position:absolute;

　　width:100%;

　　}

　　svg {

　　overflow:visible;

　　}

　　js代碼：

　　

　　

　　順便給小伙伴的建議：

　　技術人員都有自己的盲區，無論是被面試還是平時做業務，遇到需要google或者重新學習的技術點是件稀松平常的事。

　　我面試過不少2年左右經驗的iOS程序員，問他們SDWebImage是怎么做圖片緩存的，不少人給我的答案都是沒了解過，平時調用api會用就差不多了，甚至還會跟我講一堆道理，比如重復造輪子的壞處，利用成熟第三方框架提高工作效率的好處等等。道理我都懂，可是你就不能直接告訴我你確實不知道，事后你一定會去了解嗎？技術問題就是這么簡單，知之為知之，不知為不知，不存在說你不明白怎么回事卻讓你巧舌如簧蒙混過去。

　　保持謙卑的心態，遇到知識短板，虛心接受并及時彌補方是正道。