css - 带方向的动画 CSS 字母间距

Question

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

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

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

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

谢谢!

Answer 1

这是一个不修改 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;
}