CSS Expanding/sliding 文字动画

Question

我无法完全描述它是否足够好，所以我制作了这个 gif。我希望那些 links/text 在我悬停或单击时滑出一个词。有人可以帮我创建类似的东西吗？

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（包含 "Social" 的 div）和 #two 都向左浮动，因此它们显示为 side-by-side，而不是彼此下方。它们也设置为 130px 宽度，并具有白色文本颜色。

#one 设置为黑色背景，这样就看不到它下面的任何东西。 #two 然后被定位到它原本所在位置的左侧 -130px 像素，即直接在 #one 下方，并且它的 z-index 被设置为负数，所以它出现在下面#two。我们还设置了transition属性，这样当left样式改变的时候，就是动画了

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

CSS Expanding/sliding 文字动画

CSS Expanding/sliding text animation

css

animation

expand

代码

工作原理