CSS制作垂直口风琴2

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3用target属性制作垂直口风琴</title><!--下一个展开时，上一个时关闭状态-->
    <style>
        .accordionMenu {
            font: 12px Arial, Verdana, sans-serif;
            color:#424242;
            background: #fff;
            padding: 10px;
            width: 500px;
            margin:0 auto;
        }
        .accordionMenu h2 {
            margin:5px 0;
            padding:0;
            position: relative;
        }
        .accordionMenu h2:before {
            content:"";
            border: 5px solid #fff;
            border-color: #fff transparent transparent;
            width: 0;
            height: 0;
            position:absolute;
            right: 10px;
            top: 15px;
        }
        .accordionMenu h2 a {
            font-size: 13px;
            display: block;
            font-weight: normal;
            color:#424242;
            text-shadow: 2px 2px 2px #aeaeae;
            text-decoration:none;
            margin:0;
            padding:10px 10px;
            background: #8f8f8f;
            background: -moz-linear-gradient( top, #cecece, #8f8f8f);
            background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
            background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
            background: -o-linear-gradient( top, #cecece, #8f8f8f);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)";
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        .accordionMenu :target h2 a,
        .accordionMenu h2 a:focus,
        .accordionMenu h2 a:hover,
        .accordionMenu h2 a:active {
            background: #2288dd;
            background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
            background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
            background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
            background: -o-linear-gradient( top, #6bb2ff, #2288dd);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";
            color:#FFF;
        }
        .accordionMenu p {
            padding:0 10px;
            margin:0;
            height: 0;
            overflow: hidden;
            -moz-transition: height 0.5s ease-in;
            -webkit-transition: height 0.5s ease-in;
            -o-transition: height 0.5s ease-in;
            transition: height 0.5s ease-in;
        }
        .accordionMenu :target p {
            overflow: auto;
            height:100px;
        }
        .accordionMenu :target h2:before {
            border-color: transparent transparent transparent #fff;
        }

        /*上面是实现手风琴效果的所有样式代码，其中最为关键的是：*/
        /*1、实现动态效果*/
        .accordionMenu p {
            padding:0 10px;
            margin:0;
            height: 0;
            overflow: hidden;
            -moz-transition: height 0.5s ease-in;
            -webkit-transition: height 0.5s ease-in;
            -o-transition: height 0.5s ease-in;
            transition: height 0.5s ease-in;
        }
        /*在每块面板内容上使用了CSS3的transition来实现改变面板展开时高度的平滑过渡。*/
        /*2、制作面板标题*/
        .accordionMenu h2 a {
            font-size: 13px;
            display: block;
            font-weight: normal;
            color:#424242;
            text-shadow: 2px 2px 2px #aeaeae;
            text-decoration:none;
            margin:0;
            padding:10px 10px;
            background: #8f8f8f;
            background: -moz-linear-gradient( top, #cecece, #8f8f8f);
            background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
            background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
            background: -o-linear-gradient( top, #cecece, #8f8f8f);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)";
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        .accordionMenu :target h2 a,
        .accordionMenu h2 a:focus,
        .accordionMenu h2 a:hover,
        .accordionMenu h2 a:active {
            background: #2288dd;
            background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
            background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
            background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
            background: -o-linear-gradient( top, #6bb2ff, #2288dd);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";
            color:#FFF;
        }
        /*此处我们主要使用了CSS的Gradient、border-radius、text-shadow等属性制作了面板标题的默认状态和当前状态的样式风格。*/
        /*3、制作三角效果*/
        .accordionMenu h2:before {
            content:"";
            border: 5px solid #fff;
            border-color: #fff transparent transparent;
            width: 0;
            height: 0;
            position:absolute;
            right: 10px;
            top: 15px;
        }
        .accordionMenu :target h2:before {
            border-color: transparent transparent transparent #fff;
        }
        /*上面样式主要使用了CSS3的伪类“:bofore”配合“border”制作三角形*/
        /*4、展开样式 这一步是最为关键的一步，CSS3的伪类“:target”实现点击面板标题时，改变面板主内容“p”的高度。*/
        .accordionMenu :target p {
            overflow: auto;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="accordionMenu">
        <div class="menuSection" id="brand">
            <h2><a href="#brand">Brand</a></h2>
            <p>content for Brand</p>
        </div>
        <div class="menuSection" id="promotion">
            <h2><a href="#promotion">Promotion</a></h2>
            <p>content for promotion</p>
        </div>
        <div class="menuSection" id="event">
            <h2><a href="#event">Event</a></h2>
            <p>content for Event</p>
        </div>
    </div>
</body>
</html>

效果图：

target的应用

CSS3属性:target来制作一个非常简单的动画口风琴的效果。

CSS3 target伪类的简介

CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如“#brand”，target就是用来匹配ID为“brand”的元素的。

现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较明显的UI标识，使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

因为我们讨论的是有关于CSS3的属性，它支持所有现代浏览器，但在IE6-8下无法运行。

“div.accordionMenu”包装了手风琴所有块；

“div.menuSection”包含手风琴每块的标题和主内容

把口风琴每块的标题定义为“h2”

口风琴每块主内容放在了一个“p”中，并与“h2”相邻，当然大家也可以把主内容放置在一个“div”中，容易管理

此处最关键的一点是正如前面介绍“target”，我们使用“target”来达到点击展开动画效果，我们每一块需要ID来配合使用，因此我们在手风琴中的每一块中定义了一个ID号，并且在标题中的“<a>”链接的“href”属性链接了相对应块的ID号。

posted @ 2017-02-13 15:50 贺小鸣阅读(632) 评论(0) 编辑收藏举报

刷新页面返回顶部

贺小鸣

人面不知何处去，桃花依旧笑春风。 春风得意马蹄疾，一日看尽长安花。

CSS制作垂直口风琴2

人面不知何处去，桃花依旧笑春风。春风得意马蹄疾，一日看尽长安花。