Question

我是第一次使用Bootstrap设计我的个人网站。我认为这将是一次了不起的学习经历。我过去曾使用过杰基尔，但最后我的学习结果却很少。

对于我的网站，当您将鼠标悬停在“来源”或“在Github上查看”时，我想使用http://tobiasahlin.com/spinkit/处的动画下划线。我尝试在地方寻找但却找不到，因为我不确定我是否在寻找合适的东西。

如果有人向我展示了写这篇文章的方法，我将不胜感激。我假设CSS会用于这种效果。

谢谢。

Answer 1

此fiddle可帮助您找到方法。它仅使用CSS来制作动画。

<h3 class="sliding-middle-out">Underline – Middle Out</h3>
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background: blue;
}

Answer 2

您分享的网站的作者实际上写了一篇关于这个问题的博文。它可以很容易地完成。 doc是他的博客文章，逐步展示了如何做到这一点。下次尝试搜索并查看您可以找到的内容（这是您在谷歌“html中的动画下划线效果”时的第一个链接。）

Answer 3

这里有一个解释和演示：

https://www.rgraph.net/blog/an-example-of-an-animated-expanding-underline-menu-effect.html

因此代码来自（这是一个可以复制到文件并运行的页面的完整示例）：

<!DOCTYPE html >
<html>
<head>
    <style>
        div#menubar {
            font-family: sans-serif;
            background-color: #eee;
        }

        div#menubar span {
            display:inline-block;
            margin: 10px 2% 10px 2%;
        }

        div#menubar span::after {
          display: block;
          position: relative;
          top: 3px;
          content: '';
          border-bottom: solid 3px #019fb6;  
          transform: scaleX(0);  
          transition: transform .25s ease-in-out;
        }

        div#menubar span:hover::after {
            transform: scaleX(1);
        }
    </style>
</head>
<body>

    <div id="menubar">
        <span>Item 1</span>
        <span>Item 2</span>
        <span>Item 3</span>
        <span>Item 4</span>
        <span>Item 5</span>
        <span>Item 6</span>
    </div>


</body>
</html>

如何在HTML中获得动画下划线效果？

3 个答案: