リンクのトランジション効果

transition

リンクのトランジション効果

a:hover時にふわっと色が変化する。 変化にかかる時間(IEはIE10以降対応 未対応でも支障なし)
よりリッチな表現をする手段として使用します。
初期値は 0s

他に

transition-delay 変化が始まるまでの待ち時間 初期値が0s
transition-property トランジションを適用するCSSプロパティ。初期値は:all
transition-duration 値の変更完了までの所要時間。初期値は0s(秒)
transition-timing-function 変化の仕方の種類。初期値はerse

記入例:
html

css
.global-nav .nav-item a {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 8px;
color: #666;
font-size: 1.3rem;
letter-spacing: 1px; /* 文字と文字のの間隔を広げたい場合 */
transition: 0.5s; /* リンクのトランジション効果 hover時にふわっと色が変化する IE10以降対応 未対応でも支障なし*/
}

.global-nav .nav-item a:hover {
background-color: #d03c56;
color: #fff;
}

HTML4ではインライン要素であるa要素でブロックレベル要素であるdiv要素を囲むことは不適切とされていたが、HTML5からはコンテンツモデルが導入され
a要素は親要素次第でdivを囲むことができるようになった。(a要素の親要素がdiv要素を囲める要素であれば、a要素もルールをルールを引き継いでdiv要素をかこむことができる)


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です