線路通過動畫徘徊

時，我想做點什麼，我有一個線，通過文字，當我將鼠標懸停在文本的行縮進。線路通過動畫徘徊

這是我到目前爲止有：

#about { 
 
    text-decoration: line-through; 
 
    text-align: right; 
 
    padding-right: 80px; 
 
    float: right; 
 
    color: black; 
 
} 
 
#about:hover { 
 
    text-decoration: none; 
 
}

<div id="about"><a href="about.html" target="_new">ABOUT</a> 
 
</div>

我怎樣才能做到這一點？ CSS或Javascript？

來源

2015-10-02 sam

這應該是可能的CSS，雖然你將需要向我們展示你迄今爲止嘗試什麼。 –

你好，請給出一些流行的例子，你想要什麼..？所以我們可以幫助你..！ –

http://www.thmsbfft.fr/#/works類似這樣的東西。當您將鼠標懸停在「配置文件」鏈接上時，該行將緩慢縮回。 – sam

僞元素會在這裏的理想選擇。

a { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    margin: 25px; 
 
    color:black; 
 
    position: relative; 
 
} 
 

 
a::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
    width: 100%; 
 
    right: 0; 
 
    height: 25%; 
 
    background: currentColor; 
 
    transition:width 0.25s ease; 
 
} 
 

 
a:hover::after { 
 
    width: 0; 
 
}

<a href="#">Profile</a> 
 

 
<a href="#">Lorem ipsum dolor.</a>

來源

2015-10-02 07:46:01

這是可能的，雖然不是text-decoration: line-through;。我們可以通過使用僞元素並相應地對其進行動畫來重現line-through效果。

原則：

添加position: relative;到#about，這使得僞元件被相對定位成它
創建僞元件#about:after，給它height: 1px;和width: 100%;複製線通效應
絕對定位僞元素，並使用top: 0;，bottom: 0;和margin: auto 0;將其垂直對齊
添加transition: width 1s;動畫寬度
與#about:hover:after添加懸停事件，並設置width: 0;

#about { 
 
    color: black; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 
#about:after { 
 
    background-color: black; 
 
    bottom: 0; 
 
    content: ""; 
 
    display: block; 
 
    height: 1px; 
 
    margin: auto 0; 
 
    position: absolute; 
 
    top: 0; 
 
    transition: width 1s; 
 
    width: 100%; 
 
} 
 
#about:hover:after { 
 
    width: 0; 
 
}

<a id="about" href="about.html">ABOUT</a>

來源

2015-10-02 07:46:46

謝謝！這非常有幫助。有沒有一種方法可以控制線路縮回的方向？ – sam

是的，如果您添加'right：0;'（類似於@Paulie_D提供的答案），則該線將以另一種方式縮回。 https://jsfiddle.net/h15umr7a/ –

謝謝！我很感激你如何解釋你的代碼，這將幫助我學習。 – sam

移動一個text-decoration:line-through無法通過CSS也不JS來完成。

你可以，但是，使用另一個元素你動畫，例如像這樣：

.strike { 
    position: relative; 
} 

.strike:before { 
    content:" "; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    border-bottom: 1px solid red; 
    width: 100%; 
    transition: left 2s; 
} 

.strike:hover:before { 
    left: -120% 
}

查看jsfiddle here。

來源

2015-10-02 07:57:42 MoMolog

線路通過動畫徘徊

回答

相關問題