我正在参加 码上掘金体验活动，详情：show出你的创意代码块
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

最尴尬的事情莫过于，我们在vx上互道晚安之后，却在王者峡谷碰见(*/ω＼*)
那倒不如我们大大方方的约起来，就有了下面的内容啦~

代码展示

用到的技术点

html：span,div css:元素选择器，flex布局，transform旋转

具体代码

html部分

  <div>
    <span>xdm</span>
    <span>峡</span>
  </div>
  <div>
    <span>们</span>
    <span>谷</span>
  </div>
  <div>
    <span>晚</span>
    <span>约</span>
  </div>
  <div>
    <span>安</span>
    <span>起</span>
  </div>
  <div>
    <span>呀</span>
    <span>!</span>
  </div>
</div>

css部分

这一部分主要是设计文字和其所在方块的大小，并且做出了鼠标浮在其上就可以移动的效果，详细内容注释有写~

:root { 
  font-size: 20px;
  font-family: 'Courier New', Courier, monospace;
}

/* 使用flex布局，使上下左右居中 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* 子元素选择器 */
.container > div {
  /* 每一个块级元素占新的一行 */
  display: block;
  /* 每一个小块的高度 */
  height: 5rem;
  font-size: 3rem;
  /* 超出的文字被隐藏 */
  overflow: hidden;
}
/* 子元素选择器继续往下分 */
.container > div > span {
  display: block;
  /* 文字间的高度 */
  height: 6rem;
  /* 文字加粗 */
  font-weight: bold;
  /* 文字居中 */
  text-align: center;
  transition: .5s transform ease-in-out;
  /* 字体行高 */
  line-height: 5rem;
  /* 小方块的宽度 */
  padding: 0 3rem;
}
/* 当鼠标移动在.container上面的时候该样式 */
.container:hover > div > span {
  /* 文字整体向上移动 */
  transform: translateY(-100%);
}
/* 选择列表中的第 1个标签 */
.container > div:nth-child(1) {
  background-color: #EFFDF0;
}
/* 选择列表中的第 2个标签 */
.container > div:nth-child(2) {
  background-color: #F8FFF8;
}
/* 选择列表中的第 3个标签 */
.container > div:nth-child(3) {
  background-color: #EFFDF0;
}

/* 选择列表中的第 4个标签 */
.container > div:nth-child(4) {
  background-color: #F8FFF8;
}

/* 选择列表中的第 5个标签 */
.container > div:nth-child(5) {
  background-color: #EFFDF0;
}