大家好，我是洋子

最近網上爆火愛心代碼，起源來自電視劇《點燃我溫暖你》中理工男李峋做的愛心代碼非常好看


想起來當年，年少輕狂，也做個類似的表白網頁送給喜歡的人，這個就是理工男的浪漫吧

雙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_templateapp = 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，回復【愛心代碼】即可獲取

總結

以上是生活随笔為你收集整理的李峋爱心代码分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。