[CSS]クールなエフェクトを伴って、CSS3アニメーションで画像を拡大するスタイルシート
Post on:2010年7月29日
sponsors
CSS3アニメーションでレイヤーをスライドさせ、画像を拡大するスタイルシートを紹介します。
Fancy Image Hover Using CSS3
デモ
対応ブラウザはChrome, Safariで、デモでは四種類のアニメーションが紹介されています。
水平のアニメーション
垂直のアニメーション
天地のアニメーション
四方のアニメーション
実装は下記のようになります。
HTML
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <div class='images' id='image1'> <div class='layer'></div> <img src='baby.jpg' /> </div> </textarea> |
CSS
ホバー時のレイヤーがクリアされる時間には、0.8sが設定されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<textarea name="code" class="css" cols="60" rows="5"> .images{ float:left; margin-left:-20px; margin-right:-20px; margin-top:10px; -webkit-transform:scale(0.6);/*Initial size of image when page loads*/ -webkit-transition-duration: 0.5s;/*Time taken for image to animate from smaller size to bigger size*/ } .images:hover{ -webkit-transform:scale(0.8);/*When hover on images image size will increased*/ -webkit-box-shadow:0px 0px 40px #ccc; } .images .layer{ width: 100%; height: 100%; background-color:#000; position: absolute; opacity:0.5; -webkit-transition-duration: 0.8s; } #image1:hover .layer{ width:0%; } #image2:hover .layer{ height:0%; } #image3:hover .layer { height:0%; margin-top:150px; } #image4:hover .layer{ margin-left:150px; margin-top:150px; height:0%; width:0%; } </textarea> |
sponsors
