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

【问题标题】：How to get an animated underline effect in HTML?如何在 HTML 中获得动画下划线效果？
【发布时间】：2015-12-12 11:46:42
【问题描述】：

我是第一次使用 Bootstrap 设计我的个人网站。我认为这将是一次了不起的学习经历。我过去使用过 Jekyll，但我最终从中学到的东西很少。

对于我的网站，当您将鼠标悬停在“Source”或“View on Github”上时，我想使用http://tobiasahlin.com/spinkit/ 上的动画下划线。我尝试在一些地方寻找它，但找不到它，因为我不确定我是否在寻找正确的东西。

如果有人告诉我一个写这个的方法，我将不胜感激。我假设 CSS 会用于这样的效果。

谢谢。

【问题讨论】：

作为 Web 开发人员，您的一个重要里程碑是学习如何在浏览器中使用和阅读开发人员控制台——它将为您提供确定动画制作方式所需的所有信息。
抱歉，我们不会为您编写代码。我们帮助编写代码。自己尝试一下。至少先给我们一些 html 以及您尝试过的任何其他内容。首先查看您链接到的页面的来源并从那里开始工作。
Here's a hint.
stas-melnikov.ru/hovers

标签： javascript html twitter-bootstrap css underline

【解决方案1】：

您分享的网站的作者实际上就这件事写了一篇博文。它可以相当容易地完成。 Here 是他的博客文章，一步一步地展示了如何做到这一点。下次尝试四处搜索，看看你能找到什么（这是你谷歌“html中的动画下划线效果”时的第一个链接）。

【讨论】：

【解决方案2】：

这个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;
}

【讨论】：

【解决方案3】：

这里有解释和演示：

[已删除 - 源代码如下]

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

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

【讨论】：