如何在动画中间添加文本？​​

Question

我偶然发现Codepen上的this 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;
}