代碼不是很長(zhǎng)，效果還是很不錯(cuò)的，鼠標(biāo)點(diǎn)擊之后會(huì)出現(xiàn)一堆星星，話(huà)不多說(shuō)，我們來(lái)看代碼是什么樣的。

　　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代碼：

　　

　　

　　順便給小伙伴的建議：

　　技術(shù)人員都有自己的盲區(qū)，無(wú)論是被面試還是平時(shí)做業(yè)務(wù)，遇到需要google或者重新學(xué)習(xí)的技術(shù)點(diǎn)是件稀松平常的事。

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

　　保持謙卑的心態(tài)，遇到知識(shí)短板，虛心接受并及時(shí)彌補(bǔ)方是正道。