[CSS]CSS3 Transitionsを使用した画像ギャラリーのスタイルシート

CSS3 Transitionsを使用して、対応ブラウザにはアニメーションを加え、非対応ブラウザにはアニメーション無しで表示する画像ギャラリーのスタイルシートを紹介します。

デモのキャプチャ

CSS3 - The future now - Animated Slideshow
デモページ

[ad#ad-2]

デモでは下部のサムネイルをホバーすると、アニメーションで大きい画像が表示されます。

デモのキャプチャ

サムネイルの左の数字はサムネイルの一覧をアニメーションで変更します。

デモのキャプチャ

対応ブラウザはChrome, Safari, Opera, Firefox4となっており、CSS3 Transitionsに非対応のFirefox3, IE6/7/8/9などではサムネイルのホバーで瞬時に画像が表示されるようになっています。

sponsors

top of page

©2024 coliss