大家好，我是洋子

最近网上爆火爱心代码，起源来自电视剧《点燃我温暖你》中理工男李峋做的爱心代码非常好看


想起来当年，年少轻狂，也做个类似的表白网页送给喜欢的人，这个就是理工男的浪漫吧

双12就快到了，咱们来一波现场教学，看看这种爱心代码怎么整

先来看看三个版本的效果图

第一个版本为初始版本，可以看到一个爱心粒子

第2个版本，在心形中间加入了文字，心形周边也加入可以定制的漂浮文字

第3个版本加入了心形跳动的效果

制作方法

（1）其实原理非常简单，爱心代码就是一个HTML文件，在公中号 测试开发Guide，回复【爱心】可以获取三个版本的HTML代码文件

（2）使用任意一款IDE如Pycharm，或者文本编辑器Sublime Text 等工具，打开HTML文件

（3）修改HTML当中的文字，先看一下《爱心代码版本2.0.html》文件如何修改，找到下图对应的代码，修改成自己的即可

参数解析:

• name :字段为周边漂浮的文字
• name2 :字段为心形中心文字
• count : 代表周边漂浮文字的数量

   var name = '快更新';     // 修改周边漂浮的文字
   var name2 = '洋子';      // 在中心的文字
   var count = '50';        // 修改漂浮文字数量
   var nameHeartFont = "50px "; // 修改数值则修改中心名字的大小
   var myfont = " Times New Roman "; //改成你电脑上有的字体
   var nameFlowColor = '#ffc0cb'; // 飘动文字的颜色，#cc0000为红色。#ffffff是白色。#ffff00是黄色
   var nameHeartColor = '#ffc0cb'; // 爱心文字的颜色，#cc0000为红色

背景图片也可以自己更换，使用免费图床https://imgtg.com/可以上传自己的背景图片，然后替换掉下面的url里面的jpg图片链接

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  /* 修改下面的值可以改变背景颜色 */
  /* background: #000000; */

    background: url(https://i.imgtg.com/2022/11/17/t4T7b.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
}

那么版本3如何修改呢，打开《爱心代码版本3.0.html》文件，修改下图的文字即可，默认字体使用的是微软雅黑，也可替换成其他电脑上安装好的字体

发布代码

如果你有一台云服务器，那就有公网ip，有域名更好，使用Python的Web框架Flask，几行代码就可以搭建一个Web服务进行访问

from flask import Flask, render_template

app = Flask("SimpleHeartWeb")


@app.route("/love", methods=["GET", "POST"])
def index():
    return render_template('love.html')


app.run(host="0.0.0.0", port=8889, debug=True, threaded=True)

if __name__ == '__main__':
    app.run()

在templates文件夹下，放上刚才修改完成的HTML文件即可，把整个项目文件打包放在Linux云服务器上，安装Python环境、Flask依赖库、gunicorn或者uWSGI服务器，最后nohup命令常驻运行即可，具体的环境安装部分略过，可以百度相关教程

如果你只是想白嫖，或者觉得上面的方法再太麻烦了，可以免费使用github或者gitee提供的page服务，注意gitee要想使用page服务需要进行身份证实名任务

我这里以github搭建静态的网站为例，首先打开github注册账户，然后创建新的代码仓库

新建一个仓库，命名为你的github的Owner名+.github.io,注意勾选上增加创建README文件

创建好以后添加上HTML文件，创建新文件

操作完毕后进行Commit即可

最后访问https://yangzige.github.io/love.html可以看到效果，手机上访问也可以哦

附件

公中号 测试开发Guide，回复【爱心代码】即可获取