創建標記覺得突出效果

-4

我想創建，當用戶將鼠標懸停在文本它創建了一個市場的影響感到效果吧 - 完全一樣在這裏完成：http://courtneycarman.com/創建標記覺得突出效果

我希望它以同樣的方式製作動畫。

如何做到這一點的任何代碼將是偉大的。

謝謝

2017-05-30 Henry Brown

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

下一次右鍵單擊，檢查元素。就在那裏。但是，如果你不知道你在找什麼，可能很難弄清楚。

效果是通過一個:hover樣式完成的，只有在元素被徘徊時纔會激活樣式。在這種情況下，它具有通常被「0」尺寸「隱藏」的漸變背景。當它被徘徊時，它被設置爲100％大小。

然後有一個'過渡'的定義，這將照顧動畫效果。

.semibold:hover { 
 
    background-size: 100% 100%; 
 
} 
 

 
.semibold { 
 
    background-image: linear-gradient(180deg,transparent 55%,#ffde17 0); 
 
    background-size: 0 100%; 
 
    background-repeat: no-repeat; 
 
    transition: background-size 0.4s ease;

<p>here is some text and stuff<strong class="semibold">and this is semibold</strong></p>

來源

2017-05-30 14:26:56 Tschallacka

非常感謝，我可以檢查它，但我無法解決它。非常感謝！ –

研究css過渡效果，玩弄不同的可能性。也可能很好看你看動畫，添加多步動畫。 – Tschallacka

創建標記覺得突出效果

回答

相關問題