Question

我试图理解这些代码块的按钮悬停效果，但仍然感到困惑。

我可以理解当鼠标悬停在按钮.btn:hover::after上并显示背景（z = -1）按钮，然后使用transform: scaleX(1.4) scaleY(1.6);展开它

但是，当鼠标指针离开按钮时，背景按钮也确实会出现“缩小”的效果，从transform: scaleX(1.4) scaleY(1.6);到正常大小。我只是不明白哪一行代码可以控制此鼠标动画。

.btn:link,
.btn:visited {
  position: relative;
  border-radius: 10rem;
  display: inline-block;
  margin-top: 6rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  transition: all 0.2s;

}

.btn:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2rem  rgba(0, 0, 0, .3);
}

.btn:active {
  transform: translateY(-.1rem);
  box-shadow: 0 .5rem 1rem  rgba(0, 0, 0, .2);
}

.btn--white {

  background-color: #fff;
  color: #777;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--white::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

Answer 1

秘密位于按钮transition: all 0.2s / :link中的:visited中。 transition 不仅可以过渡到目标状态，还可以从目标状态过渡。本质上，transition控制着您所看到的动画的两面。

仍然使用 transform 来应用实际的偏移量，但是transition负责在是否应用transform的情况下来回平滑地淡入淡出。 -如果没有transition，动画将只是在两个状态之间“跳转”。

body {
  background: black;
}

.btn:link,
.btn:visited {
  position: relative;
  border-radius: 10rem;
  display: inline-block;
  margin-top: 6rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  transition: all 0.2s;
}

.btn:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3);
}

.btn:active {
  transform: translateY(-.1rem);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

.btn--white {
  background-color: #fff;
  color: #777;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--white::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

<a href="#" class="btn btn--white">Button</a>

CSS按钮悬停动画如何工作？

1 个答案: