纯CSS （无js）实现手风琴图片幻灯片效果

最新推荐文章于 2025-05-23 22:37:05 发布

Ben Hooper

最新推荐文章于 2025-05-23 22:37:05 发布

阅读量1.1k

点赞数

分类专栏： HTML/CSS/JS 文章标签： css html 图片轮播

HTML/CSS/JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的手风琴图片轮播效果的实现方法，通过CSS3实现了鼠标悬停时图片放大并两侧收缩的效果。文章详细展示了HTML与CSS代码，并解释了其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一次作业，但在无参考代码下自己写了一部分，然后参考了网友博客完成了部分，所以就不标为原创了，只是网友写得有点高深了，我就靠自己理解又写了一份。只是记录下来而已。

先看下默认打开效果，图片文件是老师给的，好像是传智播客的。

鼠标移上去（:hover）看到的效果

html代码部分，写的比较简单：

<div >
    <ul>
	<li><span>付出不亚于任何人的努力</span><span>付出不亚于任何人的努力</span></li>
	<li><span>谦虚戒骄</span><span>谦虚戒骄</span></li>
	<li><span>天天反省</span><span>天天反省</span></li>
	<li><span>活着就要感谢</span><span>活着就要感谢</span></li>
	<li><span>积善行、思利他</span><span>积善行、思利他</span></li>
	<li><span>不要有感性的烦恼</span><span>不要有感性的烦恼</span></li>
    </ul>
</div>

主要效果在CSS代码中，也就是CSS3才能实现效果

li{
	list-style: none;
	width: 166px;
	height: 360px;
	float: left;
	background: no-repeat;
	position: relative;
	transition: 1s;
	box-shadow: -3px 0 5px #555;
}
li span{
	line-height: 360px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	transition: 1s;
	/*背景及位置*/
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	transition:all 1s;
}
/*使用背景方法放置图片，如果需要做成动态网页，直接在html标签里写成背景图片即可实现动态添加*/
li:nth-child(1){
	background-image: url(img/1.jpg);
}
li:nth-child(2){
	background-image: url(img/2.jpg);
}
li:nth-child(3){
	background-image: url(img/3.jpg);
}
li:nth-child(4){
	background-image: url(img/4.jpg);
}
li:nth-child(5){
	background-image: url(img/5.jpg);
}
li:nth-child(6){
	background-image: url(img/6.jpg);
}

以上都不需要多少解释的，使用背景图的方法是觉得尺寸和显示的问题，如果使用img标签，设置大小就需要width和height都设置，而background-image就可以很方便设置大小。

/*把其他li设置成40px*/
div ul:hover li{
	width: 40px;
}
/*选中的那个设置width*/
div ul li:hover{
	width: 980px;
}

就两三句话就可以实现左右两边变窄，我最开始想了好久都没想到，是参考网友才知道的。（不然我最开始使用 ~ 选择器使被选中的标签后面的标签的width变小，但只能动到后面的，改变不了后面的，所以才在网上找答案）

应用的原理我理解是：用div盒子把ul的体积变成块元素，如果没有这个不会有被选中的那个变大的效果，所以我理解就是利用div标签占着空间，使li在width变大的时候可以撑开，不然会被挤压的没效果。

因为鼠标移上ul就把li的width从166px设置成40px；同时也会移动到某个li标签，所以就把这个li标签的width变成你想要宽度（980px）。

因为添加了上下的透明背景文字栏，所以还有两个样式：

li:hover span{
	height: 30px;
	line-height: 30px;
}
li:hover :first-child{
	top: 0;
}
li:hover :last-child{
	bottom: 0;
}

实际就是对span标签进行位置以及背景设置，最开始的span实际是两个标签文字叠加在一起了，看起来像一个而已。本身我想用::before和::after来添加的，但出现文字被半透明背景盖住，所以就直接用span标签来做这个半透明背景文字栏。

最后全部完整的代码：

<!DOCTYPE html>
<html>
<head>
	<title>手风琴图片轮播效果</title>
	<style type="text/css">
		li{
			list-style: none;
			width: 166px;
			height: 360px;
			float: left;
			background: no-repeat;
			position: relative;
			transition: 1s;
			box-shadow: -3px 0 5px #555;
		}
		li span{
			line-height: 360px;
			color: #fff;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			transition: 1s;
			/*背景及位置*/
			position: absolute;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.3);
			transition:all 1s;
		}
		/*使用背景方法放置图片，如果需要做成动态网页，直接在html标签里写成背景图片即可实现动态添加*/
		li:nth-child(1){
			background-image: url(img/1.jpg);
		}
		li:nth-child(2){
			background-image: url(img/2.jpg);
		}
		li:nth-child(3){
			background-image: url(img/3.jpg);
		}
		li:nth-child(4){
			background-image: url(img/4.jpg);
		}
		li:nth-child(5){
			background-image: url(img/5.jpg);
		}
		li:nth-child(6){
			background-image: url(img/6.jpg);
		}
		/*把其他li设置成40px*/
		div ul:hover li{
			width: 40px;
		}
		/*选中的那个设置width*/
		div ul li:hover{
			width: 980px;
		}
		li:hover span{
			height: 30px;
			line-height: 30px;
		}
		li:hover :first-child{
			top: 0;
		}
		li:hover :last-child{
			bottom: 0;
		}
	</style>
</head>
<body>
	<div >
		<ul>
			<li><span>付出不亚于任何人的努力</span><span>付出不亚于任何人的努力</span></li>
			<li><span>谦虚戒骄</span><span>谦虚戒骄</span></li>
			<li><span>天天反省</span><span>天天反省</span></li>
			<li><span>活着就要感谢</span><span>活着就要感谢</span></li>
			<li><span>积善行、思利他</span><span>积善行、思利他</span></li>
			<li><span>不要有感性的烦恼</span><span>不要有感性的烦恼</span></li>
		</ul>
	</div>
</body>
</html>

因为没有涉及到js以及jQuery，很值得学习一下