七夕马上就要来了，还是单身的小伙伴赶紧拿着代码表白试试，不是单身的小伙伴可以给女朋友一个不一样的惊喜哦~！
先来个界面演示
视频演示
核心代码展示（不知道为什么只能横评展示）
data: function() { return { interval: 49, currentStyle: "", enableHtml: !1, fullStyle: ["/*\n* hi 我的小张同学！\n* 祝你七夕节快乐呀 谁说理科男都是钢铁直男 （-来自理科男的❤） ~~\n* 别人家小朋友有的礼物，我家小朋友要有，别的小朋友没有的，你也要有~ \n* 康好这个页面哦。现在就是个什么也没有的网页。\n* 康我给宝贝变一点东西hhh\n* 嗯。说起来手机和电脑还得区分一下。\n* 你现在用的是。。。" + (h ? "电脑" : "手机") + "\n*/\n\n/* 首先给所有元素加上过渡效果 */\n* {\n -webkit-transition: all .3s;\n transition: all .3s;\n}\n/* 白色背景太单调了。康我给你来点颜色 */\nhtml {\n color: rgb(255,192,203);\n background: rgb(0,43,54); \n}\n/* 文字太近了 */\n.styleEditor {\n padding: .5em;\n border: 1px solid;\n margin: .5em;\n overflow: auto;\n " + (h ? "width: 48%;height: 96%;" : "width: 96%;height: 50%;") + "\n font-size: 14px;\n line-height:1.5;\n}\n/* 这些代码颜色都一样。加点儿高亮区别来 */\n.token.selector{ color: rgb(133,153,0) }\n.token.property{ color: rgb(187,137,0) }\n.token.punctuation{ color: yellow }\n.token.function{ color: rgb(42,161,152) }\n.token.comment{ color: rgb(177,177,177) }\n/* 加个 3D 效果 */\nhtml{\n -webkit-perspective: 1000px;\n perspective: 1000px;\n}\n.styleEditor {\n position: fixed; \n " + (h ? "left: 0;" : "left:0;right:0;margin:auto;") + "\n top: 0; \n -webkit-transition: none; \n transition: none; \n " + (h ? "-webkit-transform: rotateY(10deg) translateZ(-100px) ;transform: rotateY(10deg) translateZ(-100px) ;" : "-webkit-transform: rotateX(-10deg) translateZ(-100px) ;transform: rotateX(-10deg) translateZ(-100px) ;") + "\n " + (h ? "" : "-webkit-transform-origin: 50% 0% 0;transform-origin: 50% 0% 0;") + "\n}\n\n/* 再来一张信纸 */\n.resumeEditor{\n position: fixed; \n " + (h ? "right: 0;" : "left:0;right:0;margin:auto;") + "\n " + (h ? "top: 0;" : "bottom:2%;") + "\n padding: .5em; \n " + (h ? "margin: .5em;" : "") + "\n " + (h ? "width: 48%;height: 96%;" : "width: 96%;height: 50%;") + "\n border: 1px solid;\n color: #FFC0CB;\n overflow: auto;\n font-size: 20px;\n line-height:1.5;\n " + (h ? "-webkit-transform: rotateY(-10deg) translateZ(-100px) ;transform: rotateY(-10deg) translateZ(-100px) ;" : "-webkit-transform: rotateX(10deg) translateZ(-100px) ;transform: rotateX(10deg) translateZ(-100px) ;") + "\n " + (h ? "" : "-webkit-transform-origin: 50% 0% 0;transform-origin: 50% 0% 0;") + "\n }\n/* 我开始写了 */\n\n\n", "\n/* 是不是看着很简陋粗糙？还有一些看不见的句子? \n * 因为这是 Markdown 格式的\n * 一种程序员用来写文档日志的简易语言\n * 翻译成 网页 就行了\n */\n", '\n/* 再加点样式 */\n.resumeEditor{\n padding: 2em;\n line-height:1.8;\n}\n.resumeEditor h2{\n display: inline-block;\n border-bottom: 1px solid;\n margin: 1em 0 .5em;\n font-size:18px;\n}\n.resumeEditor ul,.resumeEditor ol{\n list-style: none;\n}\n.resumeEditor ul> li::before{\n content: \'•\';\n margin-right: .5em;\n}\n.resumeEditor ol {\n counter-reset: section;\n}\n.resumeEditor ol li::before {\n counter-increment: section; \n content: counters(section, ".") " "; \n margin-right: .5em;\n}\n.resumeEditor blockquote {\n margin: 1em;\n padding: .5em;\n background: rgba(221,221,221,.5);\n bu ling bu ling( •̀ ω •́ )✧ \n \n\n/*祝宝贝七夕快乐哦~~~~*/\n\n'], currentMarkdown: "", fullMarkdown: "dear × 小张同学\n---- \n\n2021年05月26日我们正式在一起~ \n已有80天\n\n一起去过的餐厅\n----\n\n* 苏格拉底自助\n* 长沙那么蛙来着\n* la vie\n* 鱼当道\n* 南北堕东北餐馆\n*咕咚火锅\n*重庆鸡公煲\n* emmm基本学附近都吃过了\n*....\n\n一起玩过的游戏\n----\n\n1. 王者荣耀\n2. qq飞车\n3. 和平精英hhh\n4. 人类一败涂地\n5. 揍击party\n6. 模拟人生4\n7. ……\n\n>我不是很擅长说一些花言巧语，但是这次我想.. \n> 宝贝 希望能和你一直在一起呀！\n\n" } },代码可自己换上自己喜欢的文字或者颜色
<!DOCTYPE html>
<html>
<head>
<!--宝贝七夕快乐呀！-->
<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" name=viewport>
<meta name=format-detection content="telephone=no">
<meta content="email=no" name=format-detection>
<meta name=apple-touch-fullscreen content=yes>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TO-我的小张宝贝！</title> //显示网页的名字
<link rel=icon href=https://img.88tph.com/tphc.1/production/20180120/12473500.jpg> //显示网页的图标
<link href=static/css/app.7cedb17e2dca9368be3e5d7f72423f08.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script type=text/javascript src=static/js/manifest.7f143e2aa81f40046d60.js></script>
<script type=text/javascript src=static/js/vendor.ccc7843f48bd0a2aeb0e.js></script>
<script type=text/javascript src=static/js/app.76d01a000d484c70e9ca.js></script>
</body>
</html>源代码下载地址：https://download.csdn.net/download/weixin_51322363/20719345?spm=1001.2014.3001.5501