javascript - 如何在动画中间添加文字？

Question

我偶然发现了 this Codepen 上的 HTML/CSS 动画基本上是一个旋转的菱形。我一直试图在其中添加一个功能，但未能成功。我想要某种文本，例如菱形中间的“HELLO”，当用户单击切换按钮时，“HELLO”文本位于菱形中间。但文字总是附在菱形的一侧。

<div class='diamond-slice diamond-slice--1'>
        <div class='diamond-slice-a'>
          <div class='pavilion'>
            <div class='pavilion__face'></div>
          </div>
          <div class='diamond-slice-b'>
            <div class='facet'></div>
            <div class='top'></div>
          </div>
        </div>
      </div>
      "HELLO WORLD"
      <div class='diamond-slice diamond-slice--2'>

这有可能吗？

Answer 1

这个呢？

https://codepen.io/anon/pen/RePRrZ

我加了

<div class='diamond intro'>
  <div class="helloText">Hello</div>

还有 CSS，

.helloText{
  position: absolute;
  top: 15px;
  margin-left: 100px;
  color: white;
}