html - 如何在悬停时制作动画文本装饰下划线

Question

我能够应用 background-image 锚定在 :hover 上，现在希望它同时具有动画效果。我怎样才能做到这一点？

.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;
}

Clarifying my question:

我想要实现的是下划线 dotted.gif 图像在悬停时在 X 轴上连续动画。到目前为止它只是出现在悬停状态

Answer 1

您可以使用 transition 和 opacity 进行淡入/淡出，还可以使用 animation 和 background-position 用于沿 X 轴移动点，try this :

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