关于表达我爱你
废话说的有点多：不喜轻喷...
我最开始想的如何隐晦的去表达我爱你，但是越写到后面，我越在想，为什么我要隐晦去表达我爱你，这本就是一件光明正大的事情。
想起许久以前我一个挚友问过我，你是觉得没有走到最后更遗憾，还是从未在一起更遗憾。
曾经的我认为没有走到一起更遗憾，随着年龄的增长，我更觉得从未在一起更遗憾吧。当然大家有大家的看法，只是我变成如此罢了。
如果有机会，就不要再错过她或他啦吧。
扯远了，还是说说我写的东西吧，写的比较简单。主要是我个人经常看这样的视频，就拿 css 模仿了一个简易版出来，先看看代码实现吧。
🌆码上
嵌入到这里面展现稍微有点点不完整，调整的话，在那边又不好看啦，请大家谅解一下，完整的可以看封面图。🤞
令人心动的情话遍地都是，真心实意的人苦寻不见；亦或是寻到了，却又未珍惜，只剩下叹息。
关于文字出处：
- 后半句的来源我忘记具体的出处了，前半句是我加上去的；
- 来自于我的一封旧情书："我想把我这一生都奉献给你，让光阴将我烧成灰烬，化做风独舞。"；
- 改编自掘友@元是在梦中的沸点的那句："希望疫情早些退散，我也早日能回此处"；
- 充满文艺风的程序员，嘿嘿，我自己给的标签😀
- 出自于掘友@红毛丹沸点文案："再想你，就跑向你，从日出追到日落黄昏"；
- 一个摄影好看且人美的掘友，也是沸点的常客。这仅代表我个人观点，嘿嘿，不过真的很美😃
- 出自于凌镜乐队南京演出中那个上台的女孩所讲："明天周六可以把我们一起出去玩，改成我们去约会吗"；
- 出自于陈粒的《历历万乡》中的歌词："单薄语言能否传达我所有牵挂。";
- 出自于政大的歌手陳嫺靜："我想偷光日月潮汐和你慢慢的聊。"；
一周七天，一天一句不重样的。
关于来自掘友的文案，均已获得本人许可，非常感谢掘友们！！！
👨💻代码实现
思路：一张背景图+文字效果
我就会一点点 CSS 和 JavaScript ，文中要是有写的不对的点，大伙记得评论一下，郑重感谢！！！
虽然看着这个效果，简单是简单，但是这里面也用到了不少不常用的东西。
不过我能做的就是打上注释，里面很多属性的具体用法还是需要大家查看和常用才能记住。
🎰html 部分
这个不是重点哈，特别简单，就整一个 h1 和 div+p 标签就好了。
<div class="div-box"> <h1>关于隐晦的表达我爱你</h1> <div class="container"> <p id="content"></p> </div> </div>
📚CSS 样式
大都数样式都很简单，主要就是使用了 flex 布局、CSS3的动画、缩放、透明等属性。大家使用的时候简单查一下就会了，很难点的倒是没有。
body{ padding:0px; margin:0px; } .div-box { font-family: Raleway, sans-serif; width: 100%; height: 100vh; position: relative; /* flex 布局 */ display: flex; align-items: center; justify-content: center; /* 背景图片设置 no-repeat: 图片不重复, */ background: url(https://raw.githubusercontent.com/ningzaichun/nzc_img_store/main/img/202205241301981.png) no-repeat; background-size: cover; /* cover: 1、按照图片的比例放大或者缩小至充满容器,而不是按照容器的比例大小来缩放*/ background-position: center; /*center: 背景图片居中在容器内*/ } h1 { width: 800px; /* 文字居中 */ text-align: center; /* 实现水平居中 */ position: absolute; left: 50%; top: 20%; transform: translate(-50%, -50%); font-weight: bold; font-size: 50px; color: #fbffff; } .container { /* 水平居中 */ position: absolute; left: 50%; top: 70%; transform: translate(-50%, -50%); height: 200px; font-size: 16px; /* 文字的阴影样式 四个属性分别是：水平阴影位置，垂直阴影的位置，模糊的距离，阴影的颜色*/ text-shadow: 0 0 1px #fff; -webkit-text-fill-color: transparent; /* 文字填充色 */ } #content { position: relative; white-space: nowrap; /* 文本不换行 */ display: flex; font-size: 2em; /* 字体大小 */ letter-spacing: 3px; /* 字间距 */ } span { opacity: 0; /* 设置 div 元素的不透明级别 0 为完全透明 1 为完全不透明 */ /* scale(数值)定义倍数缩放，>1放大，<1缩小 */ transform: scale(0); /* 缩放 一个参数 表示水平和垂直同时缩放该倍率 */ /* fadeIn：动画效果名， 2.4s 持续时间 forwards当动画完成后，保持最后一帧的状态（也就是最后一个关键帧中定义的状态） */ animation: fadeIn 2.4s forwards; } @keyframes fadeIn { to { opacity: 1; /* 设置 div 元素的不透明级别 0 为完全透明 1 为完全不透明 */ transform: scale(1); /*同上*/ } }
📰JS 部分
我不是很会写代码，觉得丑的话，轻喷就好。
// 初始化数组 let index = 0; var arr = new Array( '@宁在春："你知道吗，玫瑰已经到了花期。"', '@元是在梦中："希望疫情早些退散，我也早日能见到你"', '@红毛丹："再想你，就跑向你，从日出追到日落黄昏"', '@旧友："我想把我这一生都奉献给你，让光阴将我烧成灰烬，化做风独舞。"', '@凌镜乐队："明天周六可以把我们一起出去玩，改成我们去约会吗"', '@陈粒："单薄语言能否传达我所有牵挂。"', '@陳嫺靜："我想偷光日月潮汐和你慢慢的聊。"' ); // 做文字从中间向两边延展的效果 function fontAnimation() { let delay = 0.3; let revealText = document.getElementById("content"); let letters = revealText.textContent.split(""); // 分割出每个字符 revealText.textContent = ""; // 清空文本节点 let middle = letters.length / 2; // 取得中值 // 将每个字都放在一个 span 标签中 然后用一个动画 延迟 0.5 s 展现 letters.forEach((letter, i) => { let span = document.createElement("span"); // 创建一个 span 标签 span.textContent = letter; // 将分割出来的字符放到 span 标签中 //延迟动画： span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`; revealText.append(span); }); } function next() { document.getElementById("content").innerHTML = arr[index++]; fontAnimation(); if (index >= 7) index = 0; } next(); // setInterval("next()", 5000); // 采取上面这种定时器的写法，在码上掘金，和codepon 上都只会执行一次，没有找到原因，没搞明白... // 下面这种方式又是可以一直执行的。 没太懂 setInterval(next, 5000);
其中 fontAnimation（）函数的实现是参考了 文字从中间向两边延展 这篇博客中的而实现的😁。
💨说点废话
喜欢一个人，就大胆点吧，还记得于贞那首《放肆爱》里那句词是这样的："看上他就上前要他微信，你今晚化了妆还穿了短裙"。（我只是想表达喜欢一个人可能需要大胆点，并非说要如此着装）。
虽然我们男孩也许没有这么的诱惑人，但是打扮干净，喷点干净清新的香水，自信也就来了啊。
吸引一个人，靠的永远是自己身上特别之处，可以是优秀，也可以是其他的。
祝看到这篇文的你 平安喜乐，万事胜意！！！
