background-imageを使用したリンクアニメーション

2021-01-30

概要

リンクアニメーションをbackgroundプロパティで表現します。

解説

background-imageは半分半分にします。50% グラデーション、50% 黒みたいにします。
background-sizeで2倍の大きさにし、100% 100%の状態にします。
background-positionでx方向に-100%ずらし、#333を見せます。

hover時には以下のようにします。
background-positionをx方向0%に戻します。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店