如何製作懸停的動畫文字裝飾下劃線

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

澄清我的問題：

我想實現的是，下劃線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>

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>