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 样式发生变化时，它就会变成动画。

而且，这就是所有设置。为了让事情看起来更好，我在body 上将background-color 设置为黑色，并且作为一个演示，将#two 的left 样式设置为0，只要你将鼠标悬停在body 上 - 确实如此您可以在任何地方执行此操作 - 当#one 悬停在上面时，等等，甚至使用 Javascript。