七夕情人节表白代码

最新推荐文章于 2024-05-01 05:32:09 发布

我叫鸽咕咕

最新推荐文章于 2024-05-01 05:32:09 发布

阅读量4.5k

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_51322363/article/details/119415986

版权

七夕马上就要来了，还是单身的小伙伴赶紧拿着代码表白试试，不是单身的小伙伴可以给女朋友一个不一样的惊喜哦~！

先来个界面演示

视频演示

http://m.iqiyi.com/v_wynka9sfhw.html?isrd=1&social_platform=link&p1=2_22_221&_frd=I221DNJq6usQVrfO9RsGbMz5k3mLxXEjg7ZMF5XmCoSl%2FNWOpGtpMIkDb0XYZIbnmmnVfgp7P06OotEpCF%2FZavHrm%2BS5%2BqK%2BXkHT0LjvXcs%3D

核心代码展示（不知道为什么只能横评展示）

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

我叫鸽咕咕

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
七夕情人节表白代码

七夕马上就要来了，还是单身的小伙伴赶紧拿着代码表白试试，不是单身的小伙伴可以给女朋友一个不一样的惊喜哦~！先来个界面演示视频演示http://m.iqiyi.com/v_wynka9sfhw.html?isrd=1&social_platform=link&p1=2_22_221&_frd=I221DNJq6usQVrfO9RsGbMz5k3mLxXEjg7ZMF5XmCoSl%2FNWOpGtpMIkDb0XYZIbnmmnVfgp7P06OotEpCF%2FZ..
复制链接

扫一扫