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（）移动每个字符。请注意，我使每个字母都具有相同的宽度，即58px。这使我可以使用百分比为翻译动画。如果您使用的是特殊字体，请记住这一点。

希望这会有所帮助！

Answer 2

这是另一个适合您的示例，其中涉及一些javascript http://jsfiddle.net/29wtdj0e/12/

只需更改letsgo('BEACH','CHANGE')函数中的值即可。

它有2个循环，每个单词1个循环。第一个循环为不在第一个单词中的字母创建新元素，并对它进行动画处理。 first循环还会检查现有字母并直接对其进行动画处理。

第二个循环只会隐藏第一个单词中不需要的字母。

CSS变形文字/文字

2 个答案:

HTML