动画 CSS 带方向的字母间距

Question

我的计划：
让一些单词以较大的字母间距在屏幕右侧对齐。
当将鼠标悬停在这些单词上时，字母间距会减小。
BUT，当字母间距缩小时，文本仍必须右对齐即

                                                              H  E  L  L  O
                                                              W  O  R  L  D
// When hovered -->
                                                                      HELLO
                                                                      WORLD

所以每个单词的最后一个字母都有一个固定的位置。

到目前为止：https://jsfiddle.net/ogoo77h8/1/#&togetherjs=QjBe1mjmJe
当我尝试移动每个单词的最后一个字母时。

谢谢！

Answer 1

小html和css更新可以解决问题。

试试这个

<p class="title">
  <span class="hello">HELL<span>O</span></span>
  <span class="world">WORL<span>D</span></span>
</p>

添加css

.hello span,
.world span{
   letter-spacing: 0;
}

Answer 2

这里是不修改HTML的解决方案：

https://jsfiddle.net/16wgkemj/

它基本上只是将 <p> 元素定位在右侧（而不是左侧），然后用边距平衡最后一个字母的字母间距。

.title {
    position: absolute;
    top: 2%;
    right: 0%;
    font-size: 30px;
    text-align: right;
    letter-spacing: 20px;
}

.hello,
.world {
    -webkit-transition: letter-spacing 2s ease, margin-right 2s ease;
    transition: letter-spacing 2s ease, margin-right 2s ease;
    display:block;
    margin-right:0px;

}

.hello:hover,
.world:hover {
    letter-spacing: 0px;
    margin-right:20px;
}

动画 CSS 带方向的字母间距

Animate CSS Letter spacing with direction

css

css-transitions