CSS扩展/滑动文本动画

Question

我无法完全描述这一点，所以我做了gif。 当我悬停或点击时，我希望这些链接/文字可以滑出一个单词。 有人可以帮助我创造类似的东西吗？

Answer 1

代码

#one, #two {
  float:left;
  color:#ffffff;
  width:130px;
}
#one {
  text-align:right;
  padding-right:0.3em;
  background-color:#000000;
}
#two {
  position:relative;
  left:-130px;
  z-index:-10;
  transition:left 0.5s;
}
body {
  background-color:#000000;
}
body:hover #two {
  left:0;
}

<div id="one">Social</div>
<div id="two">| Twitter | Facebook</div>

如何运作

#one（包含“社交”的div）和#two都向左浮动，因此它们并排出现，而不是在彼此之下。它们也设置为130px宽，并且具有白色文本颜色。

#one设置为黑色背景，以便在其下方看不到任何内容。然后将#two放置在-130px像素左侧的位置，即直接位于#one下方，并将z-index设置为负值，因此它显示在下方#two。我们还设置了transition属性，以便在更改left样式时对其进行动画处理。

而且，这就是所有设置。为了让事情看起来更好，我在background-color上将body设置为黑色，并且随着演示使#two的{​​{1}}样式设置为left你将鼠标悬停在0上 - 实际上你可以在任何地方执行此操作 - 当body悬停在其他地方时，甚至使用Javascript。