李峋爱心代码分享

原创

Bug挖掘机 2022-12-11 00:09:09 博主文章分类：前端 ©著作权

文章标签 前端 javascript 开发语言 github HTML 文章分类 运维

©著作权归作者所有：来自51CTO博客作者Bug挖掘机的原创作品，请联系作者获取转载授权，否则将追究法律责任

大家好，我是洋子

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

李峋爱心代码分享_javascript

李峋爱心代码分享_github_02

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

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

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

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

李峋爱心代码分享_HTML_03

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

李峋爱心代码分享_前端_04

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

李峋爱心代码分享_github_05

制作方法

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

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

李峋爱心代码分享_github_06

（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》文件，修改下图的文字即可，默认字体使用的是微软雅黑，也可替换成其他电脑上安装好的字体

李峋爱心代码分享_javascript_07

发布代码

如果你有一台云服务器，那就有公网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_08