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

Question

谁能帮我弄清楚这个很酷的动画下划线悬停效果是如何实现的 site? I have tried to replicate it myself but have not succeeded. here is my jsbin

Answer 1

这可以通过过渡和应用边框属性到您的容器来完成

请参阅下面的代码段

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>

Answer 2

当你悬停在 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>

Answer 3

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

<!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>

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

How do I do this animated underline hover effect?

css

underline

hover