[CSS]CSS3 Transitionsを使用した画像ギャラリーのスタイルシート
Post on:2010年11月24日
CSS3 Transitionsを使用して、対応ブラウザにはアニメーションを加え、非対応ブラウザにはアニメーション無しで表示する画像ギャラリーのスタイルシートを紹介します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010112401.png)
CSS3 - The future now - Animated Slideshow
デモページ
[ad#ad-2]
デモでは下部のサムネイルをホバーすると、アニメーションで大きい画像が表示されます。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010112402.png)
サムネイルの左の数字はサムネイルの一覧をアニメーションで変更します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010112403.png)
対応ブラウザはChrome, Safari, Opera, Firefox4となっており、CSS3 Transitionsに非対応のFirefox3, IE6/7/8/9などではサムネイルのホバーで瞬時に画像が表示されるようになっています。
sponsors