时间戳

首页 > 解决方案 > 如何在动画中间添加文字？

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

问题描述

我在 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'>

是否有可能做到这一点？

标签： javascripthtmlcss

解决方案

那这个呢？

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;
}

推荐阅读