代码不是很长,效果还是很不错的,鼠标点击之后会出现一堆星星,话不多说,我们来看代码是什么样的。
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会用就差不多了,甚至还会跟我讲一堆道理,比如重复造轮子的坏处,利用成熟第三方框架提高工作效率的好处等等。道理我都懂,可是你就不能直接告诉我你确实不知道,事后你一定会去了解吗?技术问题就是这么简单,知之为知之,不知为不知,不存在说你不明白怎么回事却让你巧舌如簧蒙混过去。
保持谦卑的心态,遇到知识短板,虚心接受并及时弥补方是正道。
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » html首页特效代码(html首页源码)
1 评论