[CSS]クールなエフェクトを伴って、CSS3アニメーションで画像を拡大するスタイルシート

CSS3アニメーションでレイヤーをスライドさせ、画像を拡大するスタイルシートを紹介します。

デモのキャプチャ

Fancy Image Hover Using CSS3
デモ

対応ブラウザはChrome, Safariで、デモでは四種類のアニメーションが紹介されています。

デモのキャプチャ

水平のアニメーション

デモのキャプチャ

垂直のアニメーション

デモのキャプチャ

天地のアニメーション

デモのキャプチャ

四方のアニメーション

実装は下記のようになります。

HTML

CSS

ホバー時のレイヤーがクリアされる時間には、0.8sが設定されています。

sponsors

top of page

©2019 coliss