鏈接懸停：動畫底部邊框/下劃線

我已經知道很長一段時間這個下劃線/邊框底部動畫（小提琴：https://jsfiddle.net/0ou3o9rn/4/），但我似乎無法瞭解如何設計我的風格代碼正確...沒有任何工作。鏈接懸停：動畫底部邊框/下劃線

CSS：

.lists li { 
    position: absolute; 
    display:block; 
    left: 0; 
    top:90%; 
    margin:0 auto; 
    height: 2px; 
    background-color: #000; 
    width: 0%; 
    transition: width 1s;}

HTML：

<div class="lists"><ul> 
<li><a href="/">link 1</a></li> 
<li><a href="/">link 2</a></li> 
<li><a href="/">link 3</a></li> 
</ul></div>

例如，這是不行的，但我還是想一個動畫下劃線，當我將鼠標懸停在li S/a s到出現。誰能幫我？謝謝！

來源

2016-02-15 Enma Nii

我不明白，你的代碼工作... – drosam

的小提琴是不是我的，我不明白他們是如何造型的。 –

滑塊是一個2px高的盒子。最初塊的寬度是0px。當用戶將鼠標懸停在＃名稱上時，滑塊的寬度變爲100％。現在，css轉換應用於此寬度。所以，這個動畫就會發生。

<div id="splash"> <span id="name">random title 
     <div class="slider"></div> 
     </span> 
    </div> 


    .slider { 
     position: absolute; 
     display:block; 
     left: 0; 
     top:90%; 
     margin:0 auto; 
     height: 2px; 
     background-color: #000; 
     width: 0%; 
     transition: width 1s; 
    } 
    #name:hover > .slider { 
     width: 100%; 
    } 
    #splash { 
     width:100%; 
     height:100%; 
     background-color:#fff; 
     z-index:999999; 
     position:fixed; 
    } 
    #name { 
     color:#000; 
     font-family:'Arial-BoldMT'; 
     font-weight:bold; 
     font-size:50px; 
     letter-spacing: -2px; 
     display:block; 
     left: 50%; 
     transform: translate(-50%, 0); 
     position:absolute; 
     top:40%; 
     margin:0 auto; 
    }

來源

2016-02-15 16:13:35

無需額外的標記的（僞會做的工作太多反正），你可以簡單地使用背景圖片（或梯度），並使用background-size擴大/縮小effect.background位置可以sused設置在那裏的影響可以開始（演示如下的作用：左，中，右）

.lists li { 
 
    display: inline-block; 
 
    margin:0 1em; 
 
} 
 
.lists li a { 
 
    display: block; 
 
    padding: 3px 1em 3px; 
 
    text-decoration: none; 
 
    background: linear-gradient(to left, gold, gold) no-repeat bottom center; 
 
    background-size: 0% 3px; 
 
    /* will not show */ 
 
    transition: 0.25s; 
 
} 
 
.lists li a:hover { 
 
    background-size: 100% 3px; 
 
    /* will expand whole width */ 
 
} 
 

 
/* some more styling ? */ 
 
.lists { 
 
    background:gray; 
 
    } 
 
.lists li:first-of-type a { 
 
    background-position: bottom left; 
 
} 
 
.lists li:last-of-type a { 
 
    background-position: bottom right; 
 
} 
 
.lists li a { 
 
    background-color: #222; 
 
    color: #ace 
 
}

<div class="lists"> 
 
    <ul> 
 
    <li><a href="/">link 1</a> 
 
    </li> 
 
    <li><a href="/">link 2</a> 
 
    </li> 
 
    <li><a href="/">link 3</a> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2016-02-15 16:14:40

這真的很酷。 +1不添加額外的僞選擇器。 –

鏈接懸停：動畫底部邊框/下劃線

回答

相關問題