悬停时文本滑入 CSS

Question

我希望当鼠标悬停在 the wolf 上时文本 Along came 滑入。但是 the wolf 的位置应该不会改变。 Along came 只需滑入并从左侧淡入即可完成句子。

.main {
  width: 100vw;
  text-align:center;
}

.addText {
  display: none;
  color: rgba(255,255,255,0);
  transition: .5s;
}

.link:hover .addText {
  display: inline;
  color: red;
  transform: translate(-10px, 00%);
}

<div class="main">
  <div class="link">
      <span class="addText">Along came </span>
      the wolf
  </div>
</div>

Answer 1

这是一个想法，您可以在其中制作元素 width:0，这样它就不会影响其他元素：

.main {
  text-align:center;
}
.link {
  display:inline-block; 
}
.addText {
  display:inline-block; /* inline-block so we can set a width */
  width:0;
  white-space:nowrap; /* keep text one line */
  direction:rtl; /* change direction so the text overflow on the left */
  color: rgba(255,255,255,0);
  transition: .5s;
  transform: translateX(20px); /* put the value you want here */
  pointer-events:none; /* to avoid the hover on the text, remove to see the difference */
}

.link:hover .addText {
  color: red;
  transform: translateX(0);
}

<div class="main">
  <div class="link">
      <span class="addText">Along came </span>
      the wolf
  </div>
</div>

如果您希望文本采用 space:

，您也可以只进行翻译

.main {
  text-align:center;
}
.link {
  display:inline-block; 
}
.addText {
  display:inline-block; 
  color: rgba(255,255,255,0);
  transition: .5s;
  transform: translateX(100%);
}

.link:hover .addText {
  color: red;
  transform: translateX(0);
}

<div class="main">
  <div class="link">
      <span class="addText">Along came </span>
      the wolf
  </div>
</div>

悬停时文本滑入 CSS

Text slide in on hover CSS

css

hover

slide