写在前面

大家好，我是陈橘又青，今天中午刷微博，看到最近《点燃我温暖你》中男主角——理工男李峋的爱心代码撩到了无数人，于是把代码开源分享给大家。

文章目录

• 写在前面
• 运行示例
• 完整代码
• 保姆级运行教学
• 添加背景图片
• 修改爱心颜色

运行示例

遇见你温暖你 李峋爱心代码

完整代码

因为代码比较简单，就不做过多讲解了，大家需要自取即可，拿到代码不知道怎么运行 或 想添加背景图片 的同学可以看文章最后的教学哦！

HTML代码如下：

保姆级运行教学

如果有非计算机专业的同学不知道怎么运行代码，请接着往下看：

首先，在电脑桌面右击新建一个文本文档，并将上面给的代码复制粘贴进去，保存。

然后重命名这个文本文档，把后缀.txt改为.html格式

点击“是”即可，这时候这个文件就变成你浏览器的图标了，双击即可打开（也可以发给你喜欢的人，他可以直接在电脑上打开）

如果文件没有变成浏览器图标的话，右击这个文件，选择打开方式用你的浏览器打开即可。

效果实现啦：

补充：部分朋友反应的修改了文件扩展名后没有弹出是否更改的选项，应该是你的电脑没有开启文件扩展名选项，大家打开“此电脑”后，点击查看——显示——勾选文件扩展名，然后再去修改即可！

添加背景图片

在上面代码的第17行“position: absolute;”后添加下面这两行代码

         background-image: url("love.jpg");background-size: contain;

然后在桌面把你想添加的背景图片命名为love.jpg即可！

实现效果：

修改爱心颜色

1.找到你想要修改的颜色的 RGB色值（点击查询）
2.第215行代码“context.fillStyle = '#008c8c';”中的 008c8c 改成你想要颜色的色值即可。

成功运行了别忘了给个一键三连（点赞评论收藏）哦！如果大家喜欢这类文章，我会继续分享更多“撩妹”代码给大家。