Question

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

很难明确表达我想要实现的目标，但它正在本网站上展示weblounge.be我想要实现的效果是在主页上的两个链接上

#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。这是一个例子：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

根据我的理解，不确定为什么你在白色上使用白色，我已经为你提供了一些东西

＆＃13;

#contactlink {
    background: #1568b6;
    color: #fff;
	display: inline-block;
	line-height: normal;
	padding: 17px 20px 16px 20px;
	position: relative;
	font-weight: 700;
	text-transform: uppercase;
    text-decoration: none;
	font-size: 14px;
	letter-spacing: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background .15s;
	-moz-transition: background .15s;
	-ms-transition: background .15s;
	-o-transition: background .15s;
	transition: background .15s
}
#contactlink span {
	position: relative;
	z-index: 1;
	-webkit-transition: color .25s;
	-moz-transition: color .25s;
	-ms-transition: color .25s;
	-o-transition: color .25s;
	transition: color .25s
}
#contactlink:before {
      background: #6c6c6c;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 0;
	z-index: 0;
	display: block;
	padding: 0;
	-webkit-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
	-webkit-transform-origin: center top;
	transform-origin: center top;
	-webkit-transition: all .25s ease-out;
	-moz-transition: all .25s ease-out;
	-ms-transition: all .25s ease-out;
	-o-transition: all .25s ease-out;
	transition: all .25s ease-out
}
#contactlink:hover:before {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1)
}

＆＃13;

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

＆＃13;

悬停颜色过渡幻灯片效果

2 个答案: