CSSで画像をアニメーション表示

説明

JavaScriptを利用せずに画像をアニメーション表示する為の方法です。と言ってもマウスオーバーした時の話しです。擬似要素である :hover を用いて 実装しています。z-index , position , display:none; を利用し、画像をすっ飛ばしたりしていて力技のような気がしないでもないですが、とても面白い発想だと思いました。ここでは表現出来れば良いということでかなり手抜きです。また、写真を一枚一枚切り替えるだけなので、アニメーションという表現もピンとこないかもしれませんが、それっぽい画像を並べれば動いているように見えます。普通にアニメーションGIFを使えばいいじゃないかと言うのと、構造的に無理があると言うのは無しの方向でお願いします。CSSで画像を拡大表示を併せたりして応用すればギャラリーなどで上手い具合に使用出来るのではないでしょうか。

最低限必要な記述

CSS
HTML
<ul id="ani">
<li><a id="ph1" href="./ph01.jpg"><img src="./ph01.jpg" alt="レインボーブリッジ1" /></a></li>
<li><a id="ph2" href="./ph02.jpg"><img src="./ph02.jpg" alt="レインボーブリッジ2" /></a></li>
<li><a id="ph3" href="./ph03.jpg"><img src="./ph03.jpg" alt="レインボーブリッジ3" /></a></li>
<li><a id="ph4" href="./ph04.jpg"><img src="./ph04.jpg" alt="レインボーブリッジ4" /></a></li>
<li><a id="ph5" href="./ph05.jpg"><img src="./ph05.jpg" alt="レインボーブリッジ5" /></a></li>
<li><a id="ph6" href="./ph06.jpg"><img src="./ph06.jpg" alt="レインボーブリッジ6" /></a></li>
<li><a id="ph7" href="./ph07.jpg"><img src="./ph07.jpg" alt="レインボーブリッジ7" /></a></li>
<li><a id="ph8" href="./ph08.jpg"><img src="./ph08.jpg" alt="レインボーブリッジ8" /></a></li>
<li><a id="ph9" href="./ph09.jpg"><img src="./ph09.jpg" alt="レインボーブリッジ9" /></a></li>
<li><a id="ph10" href="./ph10.jpg"><img src="./ph10.jpg" alt="レインボーブリッジ10" /></a></li>
<li><a id="ph11" href="./ph11.jpg">>img src="./ph11.jpg" alt="レインボーブリッジ11" /></a></li>
<li><a id="ph12" href="./ph12.jpg"><img src="./ph12.jpg" alt="レインボーブリッジ12" /></a></li>
<li><a id="ph13" href="./ph13.jpg"><img src="./ph13.jpg" alt="レインボーブリッジ13" /></a></li>
<li><a id="ph14" href="./ph14.jpg"><img src="./ph14.jpg" alt="レインボーブリッジ14" /></a></li>
<li><a id="ph15" href="./ph15.jpg"><img src="./ph15.jpg" alt="レインボーブリッジ15" /></a></li>
<li><a id="ph16" href="./ph16.jpg"><img src="./ph16.jpg" alt="レインボーブリッジ16" /></a></li>
</ul>

実行例

スペシャルサンクス

参考アイディア
写真提供

備考

説明がとても面倒なので実際の記述を参考に画像の大きさや枚数を変更して試してみて下さい。まだ削れる箇所はあると思います。一番確実なのはHow to Create Flick Animations with CSSを参考にする事です。

- Copyrights © 2005 rara All Rights Reserved -
SEO [PR] おまとめローン Windows7 冷え性対策 動画 掲示板 レンタルサーバー ライブチャット SEO