javascript - 悬停颜色过渡幻灯片效果

Question

我有一个链接，当鼠标悬停在它上面时它会改变颜色，我完全符合这个编码但是我希望效果向下滑动而不是仅仅改变颜色。这怎么可能用CSS。我查看了堆栈溢出，但只能找到人们使用背景图像并更改其位置的实例。这是使这成为可能的唯一方法吗？

很难表达我想要实现的目标，但它显示在这个网站 weblounge 上。我想要实现的效果是在主页上的两个链接上

#contactlink {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  padding: 11px 51px;
  border: 1px solid #fff;
  -webkit-transition: .2s;
          transition: .2s;
  margin-left: 78px;
  margin-top: 40px;
  float: left;
  color: #FFF;
  text-decoration: none;
  -webkit-transition: .2s;
          transition: .2s;
  text-decoration: none;
  opacity: 0;
}
#contactlink:hover {
  background-color: #FFF;
  color: #666;
  border: 1px solid #fff;
  -webkit-transition: .2s;
          transition: .2s;
}

<a href="#contact" class="smoothScroll" id="contactlink">Let's talk</a>

https://jsfiddle.net/6t3quy4w/5/

Answer 1

您链接的网站通过让 :before 伪元素将其比例过渡到按钮顶部来完成他们的网站。它还需要在按钮内有一个 span，以便它的 z-index 可以设置在 :before 元素之上。这是一个例子:

a.color-change {
  display: inline-block;
  padding: 15px;
  color: black;
  background-color: white;
  position: relative;
  padding: 15px;
  border: 1px solid black;
  text-decoration: none;
  z-index: 0;
}

a.color-change:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #777;
  transform: scale(1, 0);
  transition: all .25s ease-out;
  transform-origin: center top;
  z-index: 0;
}

a.color-change:hover:before {
  transform: scale(1);
}

a.color-change span {
  z-index: 1;
  position: relative;
}

<a href="#" class="color-change"><span>Hover Over Me</span></a>