使用CSS，如何让元素一个字母一个字母地移动到正确的位置

Question

我正试图将一个单词中的字母逐个向右移动。看起来他们是被从中心拉向那个方向的。看看这支钢笔(不是我的，顺便说一句(：https://codepen.io/egrucza/pen/LZdPeP。

应该是这样的，除了单词(在HTML中(已经在那里了，当单词悬停在上面时，字母应该向右移动。现在看看我的笔里有什么：https://codepen.io/jenny0515/pen/wvpdKBz。这里有一篇文章(但请点击我的代码笔链接(：

.content1 :hover {
text-align: right;
content: "Hair Clips";
}
.content2 :hover {
text-align: right;
content: "Make-up";
}
.content3 :hover {
text-align: right;
content: "Jewelry";
}

因此，单词不应该从上方或下方出现，而应该位于行的中心(正如我在代码笔中所做的那样(，当悬停时，单词的最后一个字母应该向右移动，后面的其他字母应该在每次移动之间稍微延迟。

如何在CSS中做到这一点？

Answer 1

您需要分解元素以单独设置它们的动画。

<div class="center">
<span class="one">M</span>
<span class="two">o</span>
<span class="three">v</span>
<span class="four">e</span>

在这个CodePen中，我将字母分解为跨度并手动设置动画，还有其他解决方案可以用来清理CSS和处理延迟，但这既快又脏。

https://codepen.io/duncanlutz/pen/XWVaBQY

Answer 2

我想您首先需要了解基础知识。因此，一个简单的例子只展示了基本概念。

解释：

• 对字母使用单个span元素(最重要的，其他人已经提到过(
• letter:hover应该是清晰的
• &:nth-of-type(4)部分使用translateX移动第4个字母

还有两件事你应该知道：

• 您发布的示例中的transition属性是速记，看这里
• 据我所知，在悬停div上逐个移动所有字母需要关键帧

注意：在本例中，您只能在悬停时移动第四个字母。

HTML

<div class="box">
<span class="letter">H</span>
<span class="letter">e</span>
<span class="letter">r</span>
<span class="letter">e</span>
</div>

CSS

$duration: 5s;
span {
display: inline-block;
}
.letter:hover {
&:nth-of-type(4) {
transform: translateX(200px);
transition-duration: $duration;
}
}