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;
}

Answer 2

小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;
}

动画CSS方向间距与方向

2 个答案: