<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3制作的垂直口风琴</title> <style>
*{
margin: 0;
padding: 0;
} body {
padding: 20px 100px;
} .verticalAccordion {
width: 500px;
margin: 0 auto;
} .verticalAccordion ul {
width: 100%;
margin: 0;
padding: 0;
} .verticalAccordion li {
list-style: none outside none;
display: block;
margin: 0;
padding: 0;
height: 40px;
width: 100%;
overflow: hidden;
background: #f0f0f0;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
} .verticalAccordion h3 {
margin: 0;
padding: 10px;
height: 19px;
border-top: 1px solid #f0f0f0;
text-transform: uppercase;
color: #000;
background: #ccc;
cusor: pointer;
position: relative;
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
background: -webkit-linear-gradient( top, #999999, #cccccc);
background: -o-linear-gradient( top, #999999, #cccccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
} .verticalAccordion h3:before {
content:"";
border: 5px solid #000;
border-color: #000 transparent transparent;
position: absolute;
right: 10px;
top: 15px;
width: 0;
height: 0;
} .verticalAccordion div {
margin: 0;
voerflow: auto;
padding: 10px;
height: 220px;
} .verticalAccordion li:hover {
height: 280px;
} .verticalAccordion li:hover h3 {
color: #fff;
background: #000;
background: -moz-linear-gradient( top, #454545, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
background: -webkit-linear-gradient( top, #454545, #000000);
background: -o-linear-gradient( top, #454545, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
} .verticalAccordion li:hover h3:before {
border-color: transparent transparent transparent #fff;
}
</style>
</head>
<body>
<div class="verticalAccordion">
<ul>
<li>
<h3>Heading 1</h3>
<div>Content for Panel 1.</div>
</li>
<li>
<h3>Heading 2</h3>
<div>Content for panel 2.</div>
</li>
<li>
<h3>Headgin 3</h3>
<div>Content for panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content for panel 4.</div>
</li>
</ul> </div>
</body>
</html>
效果图:

        使用纯CSS制作手风琴效果,主要使用的是伪类“:hover”来实现,不过“:hover”只能在现代浏览器运行,在IE6下是只能支持“a:hover”,而别的元素将无法支持。
在这个实例中将添加CSS3的transition来增加过渡效果不过CSS3的效果在IE6-8下是不支持的。
1.div.verticalAccordion:我们将整个手风琴每个面板都放在一个div的容器内;
2.li:每下li放置一个面板,包含了一个标题和标题所对应的主内容;
3.h3:每个h3就是一个面板的标题;
4.div:与h3相邻的div就是每个面板的主内容。
1.默认状态效果:因为我们没有使用“:target”伪类,我们无法指定手风琴的默认状态,所以在页面载入就设置了所有面板为折叠状态。我们此处设置了“li”的高度和“h3”的高度相等,并在“li”上设置其“overflow:hidden”,以防止内容溢出;
2.默认panel标题:上一条说“h3”的高度和“li”高度相同,此例中我们的“h3”高度是通过“padding+border+height”之合计算而来,并且刚好等于“li”的高度;
3.面板主内容:需要在面主内容上设置一个“overflow:auto”,以防止内容溢出能正常阅读,因为我们在“li”设置了一个固定高度,用来控制面板展开时的高度。
4.三角形:使用“h3:before”配合border制作一个向下的三角标志。
使用鼠标悬停事件(“li:hover”)来响应手风琴展开的效果。
1.展开面板:通过在“li”元素的鼠标悬停事件(“:hover”)来改变“li”的高度,从而达到面板展开的效果;
2.高亮显示当前标题:当“li:hover”下时,改变当前下的“h3”属性,让其处于高亮状态。这里关键的一点我们使用在“li:hover h3”而并不是直接应用在“h3:hover”
3.改变三角形状态:同前面的方法一样,我们并展开状态下的三角形改变颜色和形状,表示面板处于展开状态。
添加CSS3效果
通过上面的代码,我们已经实现了除IE6下的垂直手风琴效果。为了让你的手风琴效果更具有视觉冲击力,我们在这里给他使用一些CSS3效果。其中最重要的是在“li”上添加CSS3 transition效果,增加手风琴展开时达到一种平滑过渡的效果。
当然你还可以给其添加一些其他的CSS3效果,比如说border-radius、box-shadow、text-shadow、@font-face、transform、Gradient和RGBA等效果。下面我们就在此例中给“h3”添加Gradient效果:
使用CSS制作手风琴效果,最关键的是其结构,需要将标题和其对应的主内容放在同一个块中,然后通过设置这个元素块当前状态下的高度实现折叠效果,另外在这个元素块设置其鼠标悬停事件时改变其默认高度,从而达到展开效果。

CSS3制作的垂直口风琴1的更多相关文章

  1. CSS制作垂直口风琴2

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 垂直口风琴菜单3(jquery)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  4. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  5. swiper 、css3制作移动端网站,折叠导航

    swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题 ...

  6. 使用CSS3制作各种图形

    1.正圆形 代码: HTML代码: <div class="circle"></div> CSS代码: .circle { width: 100px; he ...

  7. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  8. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  9. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

随机推荐

  1. JDK7

    https://docs.oracle.com/javase/7/docs/index.html

  2. 【Luogu4191】[CTSC2010] 性能优化

    题目链接 题意简述 求循环卷积意义下的 \(A(x)*B(x)^C\). 模数为 n+1 ,长度为 n. Sol 板子题. 循环卷积可直接把点值快速幂来解决. 所以问题就是要快速 \(DFT\),由于 ...

  3. Java调用Fortran生成so库报“libifport.so.5: 无法打开共享对象文件”错误解决方法

    source /opt/intel/bin/compilervars.sh intel64

  4. 【leetcode】1111. Maximum Nesting Depth of Two Valid Parentheses Strings

    题目如下: A string is a valid parentheses string (denoted VPS) if and only if it consists of "(&quo ...

  5. mysql DISTINCT语句 语法

    mysql DISTINCT语句 语法 作用:用于返回唯一不同的值. 语法:SELECT DISTINCT 列名称 FROM 表名称.扬州大理石量具 mysql DISTINCT语句 示例 //从表中 ...

  6. Spring read-only="true" 只读事务的一些概念

    概念:从这一点设置的时间点开始(时间点a)到这个事务结束的过程中,其他事务所提交的数据,该事务将看不见!(查询中不会出现别人在时间点a之后提交的数据) 应用场合: 如果你一次执行单条查询语句,则没有必 ...

  7. WEB实现大文件上传和下载

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  8. 运输计划noip

    靠!这道题TM搞了我好几天,真是烦死人!!!早上打了一个倍增的TM只有95分QAQ... 然后一气之下开始不断卡常,各种玄学优化,可是就是T..TAT.. 可恶!晚上我就直接打了个tarjan,还好跑 ...

  9. yum命令查询详解

    一.列举包文件列出资源库中所有可以安装或更新的rpm包# yum list列出资源库中特定的可以安装或更新以及已经安装的rpm包# yum list perl           //列出名为perl ...

  10. 查询数据库对象的DDL信息

    表的DDL select dbms_metadata.get_ddl('HBBL','TABLE','AGREEMENT_MIRROR') from dual: