代码效果(代码效果图)

　　代码不是很长，效果还是很不错的，鼠标点击之后会出现一堆星星，话不多说，我们来看代码是什么样的。

　　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会用就差不多了，甚至还会跟我讲一堆道理，比如重复造轮子的坏处，利用成熟第三方框架提高工作效率的好处等等。道理我都懂，可是你就不能直接告诉我你确实不知道，事后你一定会去了解吗？技术问题就是这么简单，知之为知之，不知为不知，不存在说你不明白怎么回事却让你巧舌如簧蒙混过去。

　　保持谦卑的心态，遇到知识短板，虚心接受并及时弥补方是正道。