Question

当我将鼠标悬停在链接上时，我想知道如何制作该链接的动画。我希望顶部边框向下移动，底部边框向上移动。动画结束时，边框应消失。当我将鼠标悬停在链接上时，边框应该出现并显示动画。

HTML：


<ul>
    <li class="active"><a href="/index">Home</a></li>
    <li><a href="/about">About Me</a></li>
    <li><a href="/passion">My Passion</a></li>
</ul>

CSS：

ul li a {
    border-bottom: 3px transparent solid;
    border-top: 3px transparent solid;
}
ul li a::before {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

ul li a::after {
    position: absolute;
    left: 0;
    top: 100%;
    visibility: hidden;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
ul li a:hover {
    color: blue;
}
ul li a:hover::before {
    visibility: visible;
    top: 100%;
    background: blue;
}
ul li a:hover::after {
    visibility: visible;
    top: 0;
    background: blue;
}

预期结果：

Answer 1

我已经在您的GIF中重新创建了示例。

对于文本悬停效果，请确保使用a { color: white; text-decoration: none; transition: 800ms ease color; display: block; } a:hover { color: gold; }来减轻效果，例如：

我正在将block标签显示为li，以确保将其悬停时能覆盖整个li::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: gold; opacity: 0; }元素。

在使用CSS伪元素时，请始终设置一个content属性（content：”是否要设置其样式）：

li:hover::before {
  opacity: 1;
   animation: flyDown 300ms ease forwards; 
}

li:hover::after {
  opacity: 1;
  animation: flyUp 300ms ease forwards;
}

@keyframes flyDown {
  from {
    transform: translateY(0px)
  }
  to {
    transform: translateY(90px)
  }
}

@keyframes flyUp {
  from {
    transform: translateY(00px)
  }
  to {
    transform: translateY(-90px)
  }
}

我没有使用边框，而是为悬停元素上的en之前和之后的元素设置了动画。您可以使用CSS keyframes来做到这一点。

{{1}}

请在此处找到jsfiddle：https://jsfiddle.net/sanderdebr/fn4pgwv6/30/

Answer 2

---html---

<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>

---css---

a {
    text-decoration: none;
}
a:hover {
    cursor: pointer;
}
.a-border {
    display: inline-block;
    position: relative;
    color: white;
    padding: 0.5rem 0.25rem;
    margin: 0 1.5rem;
    overflow: hidden;
}
.a-border::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -8px;
    left: -3%;
    width: 106%
    border-top: 2px solid white;
    transform: scale(0, 1);
    transform-origin: 0% 100%;
    transition: transform 0.4s;
}
a:hover .a-border::after {
    transform:scale(1, 1);
}
a.focused .a-border::after {
    transform: none;
}

---js---

function menuclick(underline) {
    var focused = document.getElementsByClassName("focused");
    var i;
    for (i = 0; i < focused.length; i++) {
        var under = focused[i];
        if (under.classList.contains('focused')) {
            under.classList.remove('focused');
        }
    }
    if (!underline.parentElement.classList.contains('focused')) {
        underline.parentElement.classList.add('focused');
    }
}

悬停链接边框动画

2 个答案: