最近は動くヒーローイメージが当たり前になってきましたね。 今回はjQuery、JavaScriptを使わずに、 cssだけでズームしながらふわっと表示が切り替わるスライドショーを作ってみたいと思います。 まずはデモをご覧ください background-imageで表示するパターンと imgタグで表示するパターンとを用意してみました。フェードイン・フェードアウトの動きは共通です。 スライドアニメーションに関してはどちらもcssのanimationで実装しています。 html <div class="main_imgBox"> <div class="main_img" style="background-image: url(###)"></div> <div class="main_img" style="background-image: url(###)"></div> <div cl
![cssだけでズームしながらふわっと表示が切り替わるスライドショーを作る|株式会社しずおかオンライン](https://cdn-ak-scissors.b.st-hatena.com/image/square/a56a28167dd33845a31a0f040e62c16f225654de/height=288;version=1;width=512/https%3A%2F%2Fwww.esz.co.jp%2Fcontent%2Fimages%2Fblog%2Faoyagi%2F862578680.jpg)