Question

我一直在网上搜索前后效果，我只是没有找到任何有用的东西。这就像CSS的灰色区域。我想知道如何在twitter的主页上做一个效果：这是悬停效果。 http://imgur.com/a/jBikq。它也有转换，但我不确定如何实现它。我甚至不确定这是否在使用之前和之后，我想它会悬停，但任何帮助都会非常感激。

这是我的导航代码：

<div id="navbar3" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Contact</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li class="dropdown-header">Nav header</li>
                      <li><a href="#">Separated link</a></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>
              </div>

Answer 1

您可以使用:after和:before pseudo selector来完成此操作。我基于你的图像创建了一个例子，它看起来像这样：

@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
  padding: 5%;
}

.exemple {
  font-family: 'Roboto', sans-serif;
  position: relative;
  padding: 2.5% 3.5%;
  text-decoration: none;
  font-size: 0.9em;
  color: #333333;
  transition: ease .1s;
  -webkit-transition: ease .1s;
}

.exemple:before {
  font-family: 'FontAwesome';
  content: '\f0e7';
  font-size: 1.1em;
  margin-right: 10px;
}

.exemple:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
  background: #20abe1;
  transition: ease .1s;
  -webkit-transition: ease .1s;
}

.exemple:hover {
  color: #20abe1;
}

.exemple:hover:after{
  height: 4px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<a href="#" class="exemple">Moments</a>

Working Fiddle

Answer 2

你绝对可以使用::before或者你可以为边框/填充设置动画，它会产生相同的增长效果。在这里工作小提琴：FIDDLE

Answer 3

您没有提供有关您尝试复制的确切内容的详细信息。我将假设它是从导航项底部动画的下划线。

为此，您需要使用CSS转换。

Twitter正在做的简化版本如下。他们在<a>和<li>上设置了一个高度，并为<a>添加了边框。由于他们已overflow:hidden;应用于<li>边框，因此最初会隐藏他们应用于<a>的边框。

当<li>悬停时，<a>的高度会降低。他们使用高度上的过渡来将边框设置为视图。

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  float: left;
  height: 40px;
  overflow: hidden;
}
a {
  display: block;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  text-decoration: none;
  overflow: hidden;
  border-bottom: 3px solid #0c0;
  transition: height 250ms ease-in-out;
}
li:hover a {
  height: 37px;
}

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>

这是使用伪元素在下划线中制作动画的另一种方法。

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  position: relative;
  float: left;
}
a {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  text-decoration: none;
}
a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  height: 0;
  width: 100%;
  text-align: center;
  background-color: #0c0;
  transition: height 250ms ease-in-out;
}
li:hover a:after {
  height: 3px;
}

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>

悬停效果之前和之后

3 个答案: