sounansa.net

折り畳んだり、ペロンとめくったり、アニメーションで動くhoverエフェクトをCSSで実現する方法

スポンサーリンク

Pocket

マウスhoverのアニメーション効果のTipsとして面白いと思ったので紹介。

写真画像にマウスを載せた時に、クシャッと折りたたんだり、ペロンとめくる動きをつけます。

マウスhoverに対するわかりやすさも強調されますし、見ていて楽しい動きなので、いつか使ってみたいテクニックです。

DEMOはこちら

じゃばら状に折りたたむようにHoverでアニメーションします。
hoverで折りたたむようにめくる

ペロンと横からめくるようにHoverでアニメーションします。
ペロンとめくるようにhoverアニメーション

スポンサーリンク

手前が盛り上がるようにめくるHoverアニメーションです。
手前が盛り上がるようにめくるアニメーション

こちらもじゃばら状に折りたたみますが、最初のアニメーションよりも折り目が一つ少ないタイプ。
じゃばら状に折りたたむアニメーションhover

jsとCSSのソースはこちらで確認できます。

codrops—3D THUMBNAIL HOVER EFFECTS

スポンサーリンク

comments powered by Disqus