CSSボタンのアニメーションテキストからボックス

Question

私はこのワードプレスサイトから実際に好きなメニューボタンのデザインを見てきました。http://www.sensoryguru.com/。メニューの上にマウスカーソルを置くと、テキストの後ろにはアニメーションが表示されますが、どのように表示されたのか把握することはできません。どのCSSを使用する必要がありますか？誰かが私自身の実装を手助けし、私が必要とするCSSコードを手伝ってくれれば助けになるでしょう。

おかげで、

ハーヴェイ

Answer 1

それは非常に単純な概念です。リンクを相対的に配置し、絶対に擬似要素をリンクに配置し、scaleX()とtransitionを使用して中心からの幅を調整します。

nav a { 
 
    display: inline-block; 
 
    padding: .25em 2em; 
 
    margin: 1em; 
 
    position: relative; 
 
    border-radius: .5em; 
 
    overflow: hidden; 
 
} 
 
nav a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    z-index: -1; 
 
    background: pink; 
 
    transform: scaleX(0); 
 
    transition: transform .25s; 
 
} 
 
nav a:hover:before, nav .active:before { 
 
    transform: scaleX(1); 
 
}

<nav> 
 
    <a href="#" class="active">link</a> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
</nav>