爱心代码文字升级版
大家好,我是洋子,周末咱整点其他活,乐呵乐呵
最近网上爆火爱心代码,起源来自电视剧《点燃我温暖你》中理工男李峋做的爱心代码非常好看
想起来当年,年少轻狂,也做个类似的表白网页送给喜欢的人,这个就是理工男的浪漫吧
双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
可以看到效果,手机上访问也可以哦
你好,我是洋子,非典型理工男,毕业于中国传媒大学,现大厂高级测试开发工程师
你好,我是洋子,非典型理工男,毕业于中国传媒大学,现大厂高级测试开发工程师
北漂两年,通过自学从功能测试进阶到测试开发,点击蓝字查看我的学习路线
同时,我也是 B 站 up 主:Bug挖掘机,日常分享软件测试领域干货知识,输出面试、工作经验,欢迎围观
相关文章
- Install KDE Plasma and XRDP on Ubuntu Server
- CompletableFuture事务处理
- realm.io
- Comparable泛型踩坑
- idea debug小技巧
- 宝塔防火墙IP黑名单(持续更新)
- Typecho 分页标题添加页码
- 解决NGINX报错 connection_upgrade 未知变量
- 解决宝塔邮局管理器 找不到日志文件
- 一行Java代码实现游戏中交换装备
- @Validated – 接口参数校验注解
- thingsboard设备状态更新可能导致的不一致性问腿
- windows升级docker-compose
- 理解YACC中符号的优先级和结合性
- compose--修饰符Modifier
- compose--CompositionLocal、列表LazyColumn&LazyRow、约束布局ConstraintLayout
- SAP ABAP CDS view Association 引入的缘由
- OnD1操练纪要-微信朋友圈权限领域建模操练
- 贪吃蛇复现-CoCube
- 共享主机和 WordPress 主机之间的区别