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>

Answer 2

这可以通过转换完成，并将border属性应用于容器

请参阅下面的代码段

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

如何进行动画下划线悬停效果？

3 个答案: