各位网友，大家好，我是实战互联网技术部的陌上花会开。前一段时间我给大家分享了一系列CSS3实战开发的案例，继续以前的脚步。
在本次CSS3实战开发案例中，我将手把手带领大家开发纯CSS3的手风琴特效开发。一如既往，先给大家演示效果动画：
上面的效果是纯CSS开发的，大家是不是觉得很棒呢。
现在我将分步骤带领大家实战开发今天的特效。首先，编写html源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>CSS3实战开发:手把手教你CSS3手风琴实战开发</title>
</head>
<body>
<!-- CSS教程,css3教程,html5教程,jquery教程,开发教程,互联网技术,技术分享 -->
<div class='accordion'>
<ul>
<li>
<div class='title'><a href="http://www.itdriver.cn">点击查看更多校花美图</a></div>
<a href="http://www.itdriver.cn"><img src='imgs/1.jpg'></a>
</li>
<li>
<div class='title'><a href="http://www.itdriver.cn">走近自然，深呼吸</a></div>
<a href="http://www.itdriver.cn"><img src='imgs/2.jpg'></a>
</li>
<li>
<div class='title'><a href="http://www.itdriver.cn">只要你敢想，没有不可能</a></div>
<a href="http://www.itdriver.cn"><img src='imgs/3.jpg'></a>
</li>
<li>
<div class='title'><a href="http://www.itdriver.cn">实战互联网流量积极攀升</a></div>
<a href="http://www.itdriver.cn"><img src='imgs/4.jpg'></a>
</li>
<li>
<div class='title'><a href="http://www.itdriver.cn">爱护大自然，让我们拥有一个绿色的世界</a></div>
<a href="http://www.itdriver.cn"><img src='imgs/5.jpg'></a>
</li>
</ul>
</div>
</body>
</html>
现在看一下尚未应用样式时的页面效果：
接着我们在styles.css中编写样式，首先设置页面的基本布局以及对所有元素设置默认样式：
根据最开头的演示效果，我们可以发现手风琴的大小是固定的，而且有阴影效果，样式代码如下：
.accordion{
width:800px; /*设置手风琴默认的宽高度*/
height:300px;
overflow:hidden; /*隐藏超出手风琴区域的内容*/
margin:80px auto;
box-shadow:0 0 10px 2px rgba(0,0,0,0.4); /*设置手风琴区域的阴影效果*/
}
我们从演示效果大概也会发现，默认时手风琴里图片都是显示在一行的，且提示信息title是贴在每个图片的底部。同时title的背景色是半透明的。代码如下：
.accordion ul{width:900px;}
.accordion .title{position:absolute;left:0;bottom:0;width:600px;background:rgba(0,0,0,0.5);}
.accordion .title a{display:block;color:#fff;font-size:16px;padding:20px;}
.accordion li img{display:block;}
.accordion li{
display:block;
width:160px;
height:300px;
overflow:hidden;
position:relative;
float:left;
border-left:1px solid #aaa;
box-shadow:0 0 25px 10px rgba(0,0,0,0.4);
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
此时，我们看一下页面效果：
大家发现手风琴的样式已经出来了。直至此时，当鼠标划过手风琴时，并没有我们期待的动态特效。
细心的你会发现，我在li样式上添加了-webkit-transition:all .5s;这一段样式，这是告诉浏览器，当li的属性发生变化时，执行过度效果。如果你对transition不了解，请看我的精通CSS3教程。
现在我就来添加hover事件，一旦鼠标划过手风琴，更改手风琴内部元素的宽度：
.accordion ul:hover li{width:50px;}
.accordion ul li:hover{width:600px;}
在上面这段样式中，首先当鼠标划过ul时，设置所有li的宽度为50px，当划过某一具体的li时，设置当前的宽度为600px。这样，你就会发现鼠标划过li元素时，有一个动态的渐变过度效果。现在来看一下运行效果吧！
至此，本次的手风琴特效就开发完了。大家说是不是很简单呢？
往期精彩实战开发案例一览(已被广为转载，下面只列出部分)：
3. 《CSS3实战开发：手把手教大家搜索表单发光特效实战开发》
4. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》
6. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》
8. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》
9. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》
10. 《CSS3实战开发:手把手教大家折角效果实战开发》
欢迎大家加入互联网技术交流群：62329335
相关推荐
【标题】"js css3全屏手风琴特效"是一个基于JavaScript和CSS3技术实现的交互式网页元素，主要用于创建动态且吸引人的全屏手风琴面板切换效果。这种特效通常用于网站的内容导航，帮助用户以简洁的方式查看和访问大量...
《CSS3手风琴特效详解及其动画实现》 在网页设计中，动态效果往往能提升用户体验，增强页面的互动性和视觉吸引力。CSS3作为现代网页样式的重要组成部分，提供了丰富的动画和过渡功能，使得无需JavaScript就能实现...
在这个主题中，我们聚焦于CSS3和JavaScript结合实现的垂直手风琴特效，这是一种常见的响应式组件，常用于展示有限空间内的大量信息。 手风琴特效是一种用户界面元素，它将多个内容区块以折叠和展开的方式进行组织。...
本项目“纯css3经典列表式手风琴插件”是利用CSS3的特性构建的一个实用组件，适用于创建交互式的列表展示。手风琴插件常用于网站导航、内容折叠与展开，以节省空间并提升用户体验。 手风琴插件通常包含多个可折叠的...
在网页设计和开发中，"jQuery + CSS3 嵌套式手风琴特效"是一种常见且实用的交互效果，它能有效地节省空间并增强用户体验。这种特效通常应用于导航菜单、内容展示或信息摘要等场景，让用户能够逐级展开和收起内容区块...
"纯CSS3滑动手风琴菜单代码.zip"是一个专注于利用CSS3技术实现的网页导航菜单，特别适合于那些希望在网站中添加动态效果的开发者。这款菜单代码通过纯粹的CSS3实现，不依赖JavaScript，这意味着它在性能和兼容性上...
"手风琴特效"是JavaScript在网页设计中的一种常见交互效果，它模拟了手风琴乐器的开合动作，通常用于折叠或展开内容区域，使得大量信息可以以紧凑的形式呈现，提高用户体验。 手风琴特效的核心在于利用JavaScript...
在网页设计领域，JS...总之，“JS+CSS3全屏手风琴图片展示代码”是一个集动态效果、美学设计于一体的网页组件，它展示了JS和CSS3在现代网页开发中的强大功能，为网站的图片展示提供了一种创新且吸引人的解决方案。
【CSS3横向切换图片手风琴特效】是一种利用CSS3的特性和技术实现的动态网页设计效果。在网页设计中，这种特效可以增加用户交互体验，使得内容展示更加生动有趣。下面将详细介绍这个特效涉及的主要知识点： 1. CSS3 ...
本教程将详细讲解如何利用CSS3实现一个简洁且具有滑动手风琴切换特效的菜单，该菜单特别适用于内容分类展示，如FAQ或导航栏。这个特效是基于Font Awesome图标库实现的，它提供了大量的矢量图标，使设计更加美观。 ...
纯CSS3手风琴网页特效是一种常见的网页交互设计，它以音乐中的手风琴形象为灵感，通过CSS3的特性实现内容的展开与折叠。在网页设计中，手风琴效果通常用于展示有限空间内的多级信息，如FAQs、导航菜单或详细信息的...
这是一个非常不错的CSS3手风琴特效，注意是纯CSS3的效果，无需js代码。只支持火狐、safari等浏览器，IE下无效果。 类似tab标签上下切换，大部分按钮采用CSS3实现，可有效降低对带宽的依赖。
总的来说，CSS3手风琴菜单特效代码提供了一个实现网页交互功能的起点，开发者可以通过深入理解和调整这套代码，进一步提升自己在前端开发中的技能和实践经验。无论是学习还是实际应用，这都是一个非常有价值的资源。
【CSS3响应式垂直手风琴展开收缩特效】是一种网页设计技术，主要应用于创建具有交互性的用户界面。这种特效使得内容能够以优雅的方式在有限的空间内展示，通过点击标题来展开或收缩对应的区域，通常用于节省空间并...
本文将详细解析"漂亮的CSS3手风琴动画特效"的知识点，帮助你理解如何创建一个设计时尚、颜色搭配得当且带有动画效果的手风琴切换代码。 手风琴动画特效是一种常见的UI组件，它允许用户通过点击或触摸来展开或折叠...
《Web前端开发案例教程（HTML5+CSS3）（微课版）》是一份重要的教学资料，主要关注现代Web开发的基础技术，即HTML5和CSS3。这些技术是构建交互式、响应式和动态网页的核心工具。源代码的提供使得学习者能够深入理解...
同时，JavaScript还可以借助框架如React、Vue.js或Angular进行更高效的应用开发。 这个入门教程很可能会涵盖以下内容： 1. HTML5的基础语法和新特性：学习如何创建结构化的文档，使用新标签，以及处理多媒体。 2. ...
【标题】中的“手风琴图片滑动特效（无js版）代码”指的是一个网页设计中的特效实现，这种特效通常用于展示多张图片，而这些图片可以像手风琴一样展开和折叠，使得用户能够逐个查看或者隐藏内容。在这个案例中，关键...
在这个特定的场景中，我们关注的是一个使用jQuery和CSS3实现的水平滑动手风琴文字图片切换特效代码。 手风琴效果是一种常见的UI设计元素，它允许用户展开或折叠内容区域，从而节省页面空间并提高用户体验。这种效果...