css - 从一个句子过渡到一个单词

Question

我想要实现的是使元素宽度的几个词以悬停词留在元素中心的方式动画化，其余的则顺利地超出边界。我也会在 HTML 中尽可能保持清晰，而不是使用固定像素数量的边距/宽度来定位元素。

这里是我脑海中最糟糕的草图:

* {
  transition: all 1.5s;
}

div {
  min-width: 150px;
  width: 30%;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
}

div:hover {
  background: white;
  word-spacing: 300px;
}

a:hover::after,
a:hover::before {
  content: ' ';
}

<div>
  <a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>

悬停时的每个词都应该居中(当其他词消失时，现在可能不会看到那些“跳跃”)。你有什么想法？我很确定我尝试使用字间距的方式是错误的。

Answer 1

问题是，当增加字间距时，文本会换行并产生这种跳转现象。所以你可以添加 white-space: nowrap 并且你也可以使用 padding-left 来推送文本并使其在中心:

div {
  min-width: 150px;
  width: 180px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
  white-space: nowrap;
}

div:hover {
  word-spacing: 80px;
  padding-left: 80px;
  background: white;
}

<div>
  <a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>

实际上，单词间距应用于 div，因此您不能将鼠标悬停在单词上。将此技术应用于第一个单词也更容易，因为第二个单词将被溢出隐藏，但我不确定如何使用单词间距对第二个单词执行相同的操作。

---

这是关于如何在没有字间距的情况下进行操作的另一个想法。当鼠标悬停在第二个单词上时，我使用了一些填充动画和伪元素来隐藏第一个单词。

div {
  min-width: 150px;
  width: 180px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
  white-space: nowrap;
}

.afirst,
.asecond {
  position:relative;
  display: inline-block;
  transition: all 0.5s;
}

.afirst:hover {
  padding: 0 44%;
  background: white;
}
.asecond:hover {
  padding: 0 50% 0 0;
  background: white;
}
.asecond:hover::before {
  content:" ";
  position:absolute;
  left:-50%;
  width:50%;
  top:0;
  bottom:0;
  z-index:99;
  background:#fff;
}

<div>
  <a class="afirst" href="">First</a> & <a class="asecond" href="">Second</a>
</div>

我认为您可以通过使用左侧的 :before 元素和右侧的 :after 元素来概括此解决方案以隐藏其他所有内容。

这是一个包含多个单词的示例(但未正确给出居中对齐方式，仍需改进):

div {
  min-width: 150px;
  height: 25px;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
  white-space: nowrap;
}

.word {
  position: relative;
  display: inline-block;
  transition: all 0.5s;
}

.word:hover {
  background: white;
  padding: 0 40%;
}

.word:hover::before {
  content: " ";
  position: absolute;
  left: -50%;
  width: 50%;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
}

.word:hover::after {
  content: " ";
  position: absolute;
  right: -50%;
  width: 50%;
  top: 0;
  bottom: 0;
  z-index: 99;
  background: #fff;
}

<div>
  <a class="word" href="">First</a> &
  <a class="word" href="">Second</a> &
  <a class="word" href="">third</a> &
  <a class="word" href="">Fourth</a>
</div>

另一种完美居中但其他词动画较少的解决方案:

div {
  position:relative;
  height: 25px;
  width:500px;
  margin:0 auto;
  line-height: 25px;
  background: orange;
  text-align: center;
  overflow: hidden;
  transition: all 0.5s;
  box-sizing: border-box;
  white-space: nowrap;
}

.word {
  position: relative;
  z-index:9;
  display: inline-block;
  transition: all 0.5s;
}

.word:hover {
  position:absolute;
  right:0;
  left:0;
  top:0;
  bottom:0;
  text-align:center;
  background: white;
  z-index:99;
}

<div>
  <a class="word" href="">First</a> &
  <a class="word" href="">Second</a> &
  <a class="word" href="">third</a> &
  <a class="word" href="">Fourth</a>
</div>