纯CSS实现手风琴效果

最新推荐文章于 2024-08-13 14:51:58 发布

whqet

最新推荐文章于 2024-08-13 14:51:58 发布

阅读量1.5w

点赞数 11

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

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

版权

本文介绍如何仅使用CSS3实现一个手风琴效果，当鼠标悬停时，图像宽度发生变化，通过transition添加平滑动画。案例源代码可在codepen查看和下载，适用于前端开发者学习和使用。

摘要由CSDN通过智能技术生成

今天来看一个使用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="#&#