<!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. for循环性能测试

    项目中遇到需要用for循环dom节点获取每个节点保存的数据,一共有8000多条数据,但是循环加载需要18秒左右才出来. 平时for循环中数据少感觉不出来,现在数据多了就有差别了. 部分代码如下 var ...

  2. Mybatis 并发执行导致cpu占满的问题

    最近线上服务经常 出现cpu达到100%的问题,发现都是执行oracle操作的方法就没有返回.经过排查,最后定位到cpu消耗在以下方法 System.Collections.Generic.Dicti ...

  3. mysql 数据库必会题

    Linux运维班MySQL必会面试题100道 (1)基础笔试命令考察 (要求:每两个同学一组,一个口头考,一个上机实战作答,每5个题为一组,完成后换位) 1.开启MySQL服务 2.检测端口是否运行 ...

  4. 如何使 C++ 的 StringBuilder 提升 4350% 的性能？

    介绍 经常出现客户端打电话抱怨说:你们的程序慢如蜗牛.你开始检查可能的疑点:文件IO,数据库访问速度,甚至查看web服务. 但是这些可能的疑点都很正常,一点问题都没有. 你使用最顺手的性能分析工具分析 ...

  5. wxy和zdy眼中的水题 地精部落 dp

    题目描述 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi,其中Hi是1到 ...

  6. WinSetupFromUSB - 超简单制作多合一系统安装启动U盘的工具 (支持Win/PE/Linux启动盘)

    很多同学都喜欢将电脑凌乱不堪的系统彻底重装以获得一个"全新的开始",但你会发现如今很多电脑都已经没有光驱了,因此制作一个U盘版的系统安装启动盘备用是非常必要的. 我们之前推荐过 I ...

  7. 2018-2019-2 20175214 实验三《敏捷开发与XP实践》实验报告

    一.实验内容 1.编码标准:在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己感觉最好用的功能.提交截图,加上自己学号水 ...

  8. angular ajax

    在使用angular 发送ajax的时候,状态信息是正常的,状态码200,返回的参数是使用@responsebody转换后返回的字串.在前端却总是在调用错误的回调函数,也拿不到正确的反馈信息. 回调函 ...

  9. React-Native 之 GD （六）无数据情况处理

    1.还是网络问题,在网络出现问题或者无法加载数据的时候,一般我们会展示空白页,在空白页中提示 无数据 之类的提示,比较好的还会使用 指示器 的方式告诉用户网络出现问题等等. 这边我们做以下处理,当无数 ...

  10. loj#6157 A ^ B Problem

    分析 用并查集维护 每次一个连通块的每个点记录它到当前连通块的根的异或值 对于不符合的情况容易判断 最后判断是否都在一个连通块内然后记录答案即可 代码 #include<bits/stdc++. ...