![見出し画像](https://assets.st-note.com/production/uploads/images/40016110/rectangle_large_type_2_2e504d9eb531f5560f2646a3ff61f5d9.png?width=800)
【HTML+CSS】マウスオーバーで4つのBOXが開いたり閉じたり
お疲れ様です。
ちょっと以前思いついたテクニックを。
https://revenue-test.biz/test_html/window4.html
(上記URLをブラウザでご確認ください。)
![画像1](https://assets.st-note.com/production/uploads/images/39586565/picture_pc_481769b28bc70a33f5266acd1a3fcb33.png?width=800)
添付ファイルをブラウザで開いてみればわかると思いますが、
マウスオーバーで4つのBOXが開いたり閉じたりします。
これ、Javascript無使用で、CSSのみで作った動きだったりします。
むずかしいテクニックではなくて、マウスオーバー時とそうでないときにBOXの幅を変更しているだけで、
あとは transition でその間をアニメーションで見せるという単純な手法です。
CSSのみで軽いので、使えるところがありましたらお使いください。m(_ _)m
この記事が気に入ったらサポートをしてみませんか?