时间戳

首页 > 解决方案 > CSS 按钮悬停动画是如何工作的？

css - CSS 按钮悬停动画是如何工作的？

问题描述

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

我可以理解当鼠标悬停在按钮上时会.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;
}

标签： cssanimationhover

解决方案

秘密在于按钮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>

推荐阅读