我该如何做这个动画下划线悬停效果？答案

【问题标题】：How do I do this animated underline hover effect?我该如何做这个动画下划线悬停效果？
【发布时间】：2017-03-04 18:13:37
【问题描述】：

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

【问题讨论】：

标签： css hover underline

【解决方案1】：

当您将鼠标悬停在 a 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
    }
}

&lt;a href="#" class"link"&gt;Link goes here&lt;/a&gt;

【讨论】：

【解决方案2】：

这可以通过过渡来完成，并将边框属性应用于您的容器

见下面的sn-p

body{
  background:black;
  color:orange;
}
#somethin{
  display:inline-block;
  border-bottom:solid transparent 5px;
  transition:all 1s;
}
#somethin:hover{
  cursor:pointer;
  border-bottom:solid red 5px;
  
}

<div id="somethin">
Infinite Loop
</div>

【讨论】：

【解决方案3】：

由于 CSS3 对文本装饰样式的支持不起作用，我使用了边框底部，这是一个示例代码：

<!html>
<html>
<head>
    <style>
        @keyframes cool-effect {
            from {
                border-bottom-style: solid;
            }
            50% {
                border-bottom-style: dotted;
            }
            to {
                border-bottom-style: dashed;
            }
        }

        .fancy {
            width : 300px;
            border-bottom : 2px solid #000;
        }
        .fancy:hover {
            -webkit-animation: cool-effect 1s infinite;
            -o-animation:cool-effect 1s infinite;
            animation: cool-effect 1s infinite;
        }
    </style>
</head>
<body>
    <h2 class="fancy">Underline awesome effect !</h2>
</body>
</html>

【讨论】：