html+css+css3实现手风琴效果

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

a time for you

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

阅读量429

点赞数

分类专栏：文章文章标签： html css css3 手风琴

本文链接：https://blog.csdn.net/Lzc18475884301/article/details/95806657

版权

文章专栏收录该内容

1 篇文章 0 订阅

订阅专栏

										**实现手风琴效果**

直接进入主题：
第一步，先把图片加载进去：

<div class="main">
<ul>
	<li><img src="1.jpg" alt=""/></li>
	<li><img src="2.jpg" alt=""/></li>
	<li><img src="3.jpg" alt=""/></li>
	<li><img src="4.jpg" alt=""/></li>
	<li><img src="5.jpg" alt=""/></li>
	<li><img src="6.jpg" alt=""/></li>
</ul>	
</div>

第二步，写样式

		.main{
			margin: 0;
			padding: 0;
			width: 1200px;
			height: 150px;
			margin: 200px auto;
			background-color: wheat;
			overflow: hidden;		/*超出部分隐藏*/
		}
		ul{
			padding: 0;
			margin: 12.5px 0 0 40px;
			list-style: none;
			width: 2000px;
			height: 125px;
		}
		li{
			width: 1200px;
			height: 125px;
			overflow: hidden;
			float: left;	
			transition: .5s ;	/*过渡*/
		}

注：图片的横排，使用display: inline-block；也是可以的实现效果的
第三步：效果实现
这里需要一个重要的伪类：hover

		ul:hover li{width: 105px;}/*当鼠标经过ul时，li宽度缩小*/
		ul li:hover{width: 600px;}/*当鼠标经过li时，li宽度增大*/

如果想实现“回弹一下”的效果，那就在过渡后面加入cubic-bezier(.29,1.21,.52,1.46)；后面的数字自己去这个网站（https://cubic-bezier.com）调。
代码很多不规范的地方请谅解，我会努力改进。
完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta  name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<title>手风琴效果</title>
	<style>
		.main{
			margin: 0;
			padding: 0;
			width: 1200px;
			height: 150px;
			margin: 200px auto;
			background-color: wheat;
			overflow: hidden;
		}
		ul{
			padding: 0;
			margin: 12.5px 0 0 40px;
			list-style: none;
			width: 2000px;
			height: 125px;
		}
		li{
			width: 185px;
			height: 125px;
			overflow: hidden;
			float: left;
			transition: .5s cubic-bezier(.29,1.21,.52,1.47);
			
		}
		ul:hover li{width: 107px;}
		ul li:hover{width: 575px;}
	</style>
</head>

<body>
<div class="main">
<ul>
	<li><img src="images/1.jpg" alt=""/></li>
	<li><img src="images/2.jpg" alt=""/></li>
	<li><img src="images/3.jpg" alt=""/></li>
	<li><img src="images/4.jpg" alt=""/></li>
	<li><img src="images/5.jpg" alt=""/></li>
	<li><img src="images/6.jpg" alt=""/></li>
</ul>	
</div>
</body>
</html>