悬停动画不流畅答案

【问题标题】：Hover animation not smooth悬停动画不流畅
【发布时间】：2021-05-17 21:40:11
【问题描述】：

我现在正在涉足网页设计，我正在尝试从这里复制“购买更多”按钮动画（https://themes.getbootstrap.com/preview/?theme_id=67539）。虽然我确实找到了边框的解决方案，但我无法为图标制作流畅的动画（我使用的是很棒的字体），而是直接跳转。提前感谢您的帮助

我的 CSS 是这个按钮是：


and the html for it is `<a href="#" class="navbar__btn">Buy now&nbsp;&nbsp;<i class="fas fa-level-down-alt navbar__btn--i"></i></a>`

.navbar__btn {
  position: relative;
  font-size: 1.2rem;
  color: #fff;
  display: inline-block;
  margin-right: 7rem;
  padding-top: .5rem;
}

.navbar__btn:after {
  margin-top: .3rem;
  display: block;
  content: " ";
  border-bottom: solid 2px #fff;
  transform: scaleX(0);
  transform-origin:  0% 100%;
  transition: all 1s ease-in-out;
}

.navbar__btn:hover:after {
  transform:scaleX(1.2);
}

.navbar__btn:hover .navbar__btn--i {
  left: 7rem;
}

.navbar__btn--i {
  position: absolute;
  top: 5px;
  transition: all 1s linear 1s;
}

而 html 是

<a href="#" class="navbar__btn">Buy now&nbsp;&nbsp;<i class="fas fa-level-down-alt navbar__btn--i"></i></a>

【问题讨论】：

transition 工作在同一属性的变化上。如果要在“left”属性上应用过渡，则需要在两个声明中指定该属性，ergo 你需要在最后一个“.navbar__btn--i”上指定左边
这件事要记住，谢谢

标签： html css hover icons

【解决方案1】：

替换相应的图标。我是根据链接设计的。您可以根据自己的喜好调整延迟

.navbar__btn {
  position: relative;
  font-size: 1.2rem;
  color: #fff;
  display: inline-block;
  margin-right: 7rem;
  padding-top: .5rem;
  color:black;
  text-decoration:none;
  color:white;
}

.navbar__btn:after {
  margin-top: .3rem;
  display: block;
  content: " ";
  border-bottom: solid 2px #fff;
  transform: scaleX(0);
  transform-origin:  0% 100%;
  transition: all .5s ease-in-out;
}

.navbar__btn:hover:after  {
  transform:scaleX(1.3);
}

.navbar__btn:hover .navbar__btn--i {
  right: -20px;
}

.navbar__btn--i {
  position: absolute;
  top: 5px;
  right:-10px;
  line-height:0px;
  transition: all .3s linear 0s;
  vertical-align:middle;
  margin-top:15px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div style="heigth:100px;width:500px;background:red;padding:5px;">
  <a href="#" class="navbar__btn">Buy now&nbsp;&nbsp;<i class="fas fa-arrow-right navbar__btn--i"></i></a>
</div>

【讨论】：

谢谢