如何在鼠标悬停时制作动态文本下划线装饰

Question

我能够在:hover状态下将background-image应用于锚点，并希望同时进行动画处理。我该如何实现？

.nav-content ul li a {
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
}

.nav-content ul li a:hover {
    text-decoration: none;
    background: url('dotted.gif') bottom repeat-x;
}

我想实现的是在悬停时，下划线dotted.gif图片在X轴上持续动画化。到目前为止，它只会在悬停时出现。

- Durdona A.

Answer 1

你可以使用transition和opacity来实现淡入淡出效果，也可以使用animation和background-position来沿着X轴移动点，试试这个:

.link {
    position: relative;
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
    color: #000;
}

    .link:after {
        content: ''; 
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: url('http://oi62.tinypic.com/256wzvb.jpg');
        background-size: 120px 120px;
        opacity: 0;
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
        -webkit-animation: x-move 5s linear infinite; 
        animation: x-move 5s linear infinite;
    }

    .link:hover {
        text-decoration: none;
    }

        .link:hover:after {
            opacity: 1;
        }

@-webkit-keyframes x-move {
    0% { background-position: 0 0; }
    100% { background-position: 120px 0; }
}

@keyframes x-move {
    0% { background-position: 0 0; }
    100% { background-position: 120px 0; }
}

<a class="link" href="#">Test link</a>

- sergdenisov

---

我已经得到了相同的效果，但我希望它在X轴上像循环效果一样动画化。 - Durdona A.

@alpha 在你的示例代码中没有动画。你应该先明确你的问题。 - sergdenisov

我的意思是，当你悬停在链接上时，我想要与你提供的相同效果... 我希望在你悬停时下划线在 X 轴上持续动画化。 - Durdona A.

@alpha 我改进了我的回答，请查看一下。 - sergdenisov

Answer 2

像这样的内容吗？

.link {
    position: relative;
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
}

.link:after {
    content: ''; 
    height: 1px;
    display: block;
    border-bottom: 1px dotted #e0d16c;
    width: 0;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
}

.link:hover {
    text-decoration: none;
}

.link:hover:after {
    width: 100%;
}

<div style="background: black; width: 200px; height: 100px; padding: 10px;">
    <a class="link" href="#">Test link</a>
</div>

- AdrianEddy

---

谢谢，一开始我也有这个想法...不如不滑动它的宽度，而是像一个水平线一样连续地动画显示dotted.gif图像？我为你的努力点赞，但上面的答案才是我的解决方案。再次感谢。 - Durdona A.