css - 我如何做这个动画下划线悬停效果？

Question

谁能帮我弄清楚这个很酷的动画下划线悬停效果是如何在 site 上完成的？ ？我试图自己复制它，但没有成功。这是我的 jsbin

Answer 1

当你将鼠标悬停在 href 上时，你需要为此编写 css 和动画功能，你可以引用我的代码

a{
  text-decoration:none;
}
a:hover {
    border-bottom: 1px solid;
    -webkit-animation: border-hover .6s infinite ease-in-out !important;
    animation: border-hover .6s infinite ease-in-out !important
}

@-webkit-keyframes border-hover {
    0%,
    100% {
        border-bottom-style: dotted
    }
    25%,
    50% {
        border-bottom-style: dashed
    }
    75% {
        border-bottom-style: solid
    }
}

@-moz-keyframes border-hover {
    0%,
    100% {
        border-bottom-style: dotted
    }
    25%,
    50% {
        border-bottom-style: dashed
    }
    75% {
        border-bottom-style: solid
    }
}

@-o-keyframes border-hover {
    0%,
    100% {
        border-bottom-style: dotted
    }
    25%,
    50% {
        border-bottom-style: dashed
    }
    75% {
        border-bottom-style: solid
    }
}

@keyframes border-hover {
    0%,
    100% {
        border-bottom-style: dotted
    }
    25%,
    50% {
        border-bottom-style: dashed
    }
    75% {
        border-bottom-style: solid
    }
}

<a href="#" class"link">Link goes here</a>