时间戳

首页 > 解决方案 > CSS 动画留下杂散像素

html - CSS 动画留下杂散像素

问题描述

我试图在我的导航栏链接上实现一个简单的“悬停下划线”动画。然而，动画完成后会留下杂散像素，如下面的 GIF 所示。

下划线动画将杂散像素留在左侧

奇怪的是，如果我将光标悬停在具有相同动画的两个链接之间，它就不会发生。仅当我将鼠标悬停在链接上然后将光标移动到其他位置时才会发生这种情况。

在导航栏链接之间悬停时不会发生该错误

我已经实现了导航栏如下： -

<div class="nav-bar-flex">
      <a href="#">Home</a>
      <a href="#">Company</a>
      <a href="#">Careers</a>
</div>

CSS：

.nav-bar-flex a {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.055rem;
}

.nav-bar-flex > a::after {
     content: "";
     display: block;
     width: 0%;
     border-bottom: 2px var(--secondary-orange) solid;
     margin-top: 0.3rem;
     transition: width 300ms;
}

.nav-bar-flex > a:hover::after {
     width: 100%;
     transition: width 300ms;
}

标签： htmlcssfrontendcss-animationsweb-frontend

解决方案

为 after 及其过渡添加不透明度

.nav-bar-flex a {
  display: inline-block;
   color: white;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 400;
   letter-spacing: -0.055rem;
 }

.nav-bar-flex > a::after {
  content: "";
  display: block;
  width: 0%;
  opacity: 0;
  border-bottom: 2px var(--secondary-orange) solid;
  margin-top: 0.3rem;
  transition: width 300ms, opacity 300ms;

}

 .nav-bar-flex > a:hover::after {
    width: 100%;
    opacity: 1;
   transition: width 300ms, opacity 300ms;
}

工作解决方案：https ://codepen.io/aledebarba/pen/zYNzOrL

推荐阅读