#代码情诗# 我正在参与「JUEJIN FRIENDS 告白计划」
关于表达我爱你
废话说的有点多：不喜轻喷...
我最开始想的如何隐晦的去表达我爱你，但是越写到后面，我越在想，为什么我要隐晦去表达我爱你，这本就是一件光明正大的事情。
想起许久以前我一个挚友问过我，你是觉得没有走到最后更遗憾，还是从未在一起更遗憾。
曾经的我认为没有走到一起更遗憾，随着年龄的增长，我更觉得从未在一起更遗憾吧。当然大家有大家的看法，只是我变成如此罢了。
如果有机会，就不要再错过她或他啦吧。
扯远了，还是说说我写的东西吧，写的比较简单。主要是我个人经常看这样的视频，就拿 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（）函数的实现是参考了 文字从中间向两边延展 这篇博客中的而实现的😁。
💨说点废话
喜欢一个人，就大胆点吧，还记得于贞那首《放肆爱》里那句词是这样的："看上他就上前要他微信，你今晚化了妆还穿了短裙"。（我只是想表达喜欢一个人可能需要大胆点，并非说要如此着装）。
虽然我们男孩也许没有这么的诱惑人，但是打扮干净，喷点干净清新的香水，自信也就来了啊。
吸引一个人，靠的永远是自己身上特别之处，可以是优秀，也可以是其他的。
祝看到这篇文的你 平安喜乐，万事胜意！！！
