誰かが私にこのCSSコードを説明してください。

こんにちは私はCSSに新しく、このテキストの下線アニメーションを見てきました。私がこのコードから何かを取り除くだけで、それはちょうど動作を停止します。前もって感謝します！誰かが私にこのCSSコードを説明してください。

body { 
 
    background-color: black; 
 
} 
 
body a { 
 
    font-weight: 200; 
 
    font-size: 18px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    position: relative; 
 
    color: #fff; 
 
} 
 
body a:visited { 
 
    color: white; 
 
} 
 
body a:hover { 
 
    color: white; 
 
} 
 
body a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 0%; 
 
    border-bottom: 2px solid #fff; 
 
    transition: 0.4s; 
 
} 
 
body a:hover:after { 
 
    width: 100%; 
 
}

<body> 
 
<a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a> 
 
</body>

出典

2017-04-26 G. Rami

何ここで本当に重要なのは、疑似要素がある「：後」と「：前に」（この最後の1がここに存在していないが）。

ここでこの部分は、それが人生に来て作るものです：

body a:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0%; 
    border-bottom: 2px solid #fff; 
    transition: 0.4s; 
}

あなたが見る、基本的には、要素の疑似要素のプロパティの宣言を見ています。（CSS-CSS3を少し掘り下げてみてください）。

ボディーの子であるアンカーでホバーイベントをトリガーした後、擬似エレメントの下端の幅が2ピクセルで、白色のソリッドカラーと0.4秒のトランジションがあります。

疑似要素の幅が初期状態で0％であり、ホバリング後に遷移で100％になることがわかります（例のように左から右に向かいます）。）。

このCSSコードでは多くのことを考慮する必要がありますが、実際には基本を学ぶ必要があります。

出典

2017-04-26 21:50:31

私は見ることができますが、これらのプロパティはアニメーションと何が関係しているのでしょうか？それらのアニメーションは表示されません！ –

この行でアニメーションが作成されます。 transition：0.4s;

本文a：hover：afterルールの幅が100％であることがわかります。そのトランジションプロパティは、レンダリングエンジンに、通常状態とホバー状態の間で値が変化する任意のプロパティで実行されるアニメーションがあることを通知します。

レンダリングエンジンは、widthプロパティを100％に設定することを読み取ります。ホバーする前は0％に設定しました。遷移は、「ホッとすると、4分の1秒に0〜100％の幅プロパティをアニメートします。

これは、ホバー状態とノンホバー状態の間で異なるすべてのプロパティに当てはまります。言い換えれば、あなたはそう長く二つの状態が異なる値と同じプロパティを定義すると、一度に複数のプロパティをアニメーション化することができます。

出典

2017-04-26 21:52:04 Korgrue

を:after擬似CSSが別の「仮想」の要素が選択された要素

の後に追加されることを意味し

a:afterに追加された擬似要素は、底がborderの単純な要素ですが、幅がありません（0%）

その要素のtransitionプロパティが変更され、その要素のすべてのプロパティが

をアニメ化されることを、意味しそう...

あなたはbody a:hover:afterに記載された要素（）置くと - の幅をその「仮想」要素の100％に設定され、アニメーションが行われます

出典

2017-04-26 21:55:30 levi

誰かが私にこのCSSコードを説明してください。

答えて

関連する問題