大家好，我是洋子

最近網(wǎng)上爆火愛(ài)心代碼，起源來(lái)自電視劇《點(diǎn)燃我溫暖你》中理工男李峋做的愛(ài)心代碼非常好看


想起來(lái)當(dāng)年，年少輕狂，也做個(gè)類似的表白網(wǎng)頁(yè)送給喜歡的人，這個(gè)就是理工男的浪漫吧

雙12就快到了，咱們來(lái)一波現(xiàn)場(chǎng)教學(xué)，看看這種愛(ài)心代碼怎么整

先來(lái)看看三個(gè)版本的效果圖

第一個(gè)版本為初始版本，可以看到一個(gè)愛(ài)心粒子

第2個(gè)版本，在心形中間加入了文字，心形周邊也加入可以定制的漂浮文字

第3個(gè)版本加入了心形跳動(dòng)的效果

制作方法

（1）其實(shí)原理非常簡(jiǎn)單，愛(ài)心代碼就是一個(gè)HTML文件，在公中號(hào) 測(cè)試開(kāi)發(fā)Guide，回復(fù)【愛(ài)心】可以獲取三個(gè)版本的HTML代碼文件

（2）使用任意一款I(lǐng)DE如Pycharm，或者文本編輯器Sublime Text 等工具，打開(kāi)HTML文件

（3）修改HTML當(dāng)中的文字，先看一下《愛(ài)心代碼版本2.0.html》文件如何修改，找到下圖對(duì)應(yīng)的代碼，修改成自己的即可

參數(shù)解析:

• name :字段為周邊漂浮的文字
• name2 :字段為心形中心文字
• count : 代表周邊漂浮文字的數(shù)量

var name = '快更新'; // 修改周邊漂浮的文字var name2 = '洋子'; // 在中心的文字var count = '50'; // 修改漂浮文字?jǐn)?shù)量var nameHeartFont = "50px "; // 修改數(shù)值則修改中心名字的大小var myfont = " Times New Roman "; //改成你電腦上有的字體var nameFlowColor = '#ffc0cb'; // 飄動(dòng)文字的顏色，#cc0000為紅色。#ffffff是白色。#ffff00是黃色var nameHeartColor = '#ffc0cb'; // 愛(ài)心文字的顏色，#cc0000為紅色

背景圖片也可以自己更換，使用免費(fèi)圖床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如何修改呢，打開(kāi)《愛(ài)心代碼版本3.0.html》文件，修改下圖的文字即可，默認(rèn)字體使用的是微軟雅黑，也可替換成其他電腦上安裝好的字體

發(fā)布代碼

如果你有一臺(tái)云服務(wù)器，那就有公網(wǎng)ip，有域名更好，使用Python的Web框架Flask，幾行代碼就可以搭建一個(gè)Web服務(wù)進(jìn)行訪問(wèn)

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文件即可，把整個(gè)項(xiàng)目文件打包放在Linux云服務(wù)器上，安裝Python環(huán)境、Flask依賴庫(kù)、gunicorn或者uWSGI服務(wù)器，最后nohup命令常駐運(yùn)行即可，具體的環(huán)境安裝部分略過(guò)，可以百度相關(guān)教程

如果你只是想白嫖，或者覺(jué)得上面的方法再太麻煩了，可以免費(fèi)使用github或者gitee提供的page服務(wù)，注意gitee要想使用page服務(wù)需要進(jìn)行身份證實(shí)名任務(wù)

我這里以github搭建靜態(tài)的網(wǎng)站為例，首先打開(kāi)github注冊(cè)賬戶，然后創(chuàng)建新的代碼倉(cāng)庫(kù)

新建一個(gè)倉(cāng)庫(kù)，命名為你的github的Owner名+.github.io,注意勾選上增加創(chuàng)建README文件

創(chuàng)建好以后添加上HTML文件，創(chuàng)建新文件

操作完畢后進(jìn)行Commit即可

最后訪問(wèn)https://yangzige.github.io/love.html可以看到效果，手機(jī)上訪問(wèn)也可以哦

附件

公中號(hào) 測(cè)試開(kāi)發(fā)Guide，回復(fù)【愛(ài)心代碼】即可獲取

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。