CSS变形词/文本

Question

有没有办法将标题文本从一个词变形为另一个词，同时保留两个词中使用的字母？我看过的许多 css 文本动画大多是视觉的，很少有旋转整个单词的。

我想要做的是从一个词过渡，例如“BEACH”到“CHANGE”，其中一些字母会消失，而另一些会重新排列。

我知道它可以在 After Effects 中完成，也可以使用旋转/关键帧来完成，但它不流畅而且很卡。

如果有任何帮助或有类似的元素可以实现，我们将不胜感激。

Answer 1

我为您制作了一个示例，可能不是您所需要的，但您可以从这里进行改进:https://jsfiddle.net/0gkt8qw6/4/

我这样做的方式是将每个字母视为一个元素，就像这样

HTML

<div class="word first-form">
  <div class="letter letter-b">B</div>
  <div class="letter letter-c">C</div>
  <div class="letter letter-h">H</div>
  <div class="letter letter-a">A</div>
  <div class="letter letter-n">N</div>
  <div class="letter letter-g">G</div>
  <div class="letter letter-e">E</div>
</div>

然后我使用 transform: translateX() 移动每个 Angular 色。请注意，我让每个字母具有相同的宽度，即 58px。这使我可以使用百分比为翻译设置动画。如果您使用特殊类型的字体，请记住这一点。

希望这对您有所帮助!