纯CSS实现手风琴效果

最新推荐文章于 2023-07-29 18:59:36 发布

whqet

最新推荐文章于 2023-07-29 18:59:36 发布

阅读量1.5w

点赞数 11

分类专栏： css3 less&sass CSS3演武场文章标签： css3 前端开发 pure css transition

本文链接：https://blog.csdn.net/whqet/article/details/19750019

版权

今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。

感谢TheCodePlayer的图片和灵感。

下面来看看html，我们用ul、li来布局案例，我们需要一个图像盒子和一个图像描述的盒子。

<div class="accordian">
	<ul>
		<li>
			<div class="image_title">
				<a href="#">KungFu Panda</a>
			</div>
			<a href="#">
				<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Toy Story 2</a>
			</div>
			<a href="#&#