有没有办法将标题文本从一个词变形为另一个词,同时保留两个词中使用的字母?我看过的许多 css 文本动画大多是视觉的,很少有旋转整个单词的。
我想要做的是从一个词过渡,例如“BEACH”到“CHANGE”,其中一些字母会消失,而另一些会重新排列。
我知道它可以在 After Effects 中完成,也可以使用旋转/关键帧来完成,但它不流畅而且很卡。
如果有任何帮助或有类似的元素可以实现,我们将不胜感激。
最佳答案
我为您制作了一个示例,可能不是您所需要的,但您可以从这里进行改进: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。这使我可以使用百分比为翻译设置动画。如果您使用特殊类型的字体,请记住这一点。
希望这对您有所帮助!
关于CSS变形词/文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52771366/