关闭

css手风琴效果

标签: csscss3
229人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"> <title> 垂直手风琴 </title> <style type="text/css">
.accordionMenu {
  background: #fff;
  color:#424242;
  font: 12px Arial, Verdana, sans-serif;
  margin:0 auto;
  padding: 10px;
  width: 500px;
}
.accordionMenu h2 {
  margin:5px 0;
padding:0;
  position: relative;
}
.accordionMenu h2:before {/*制作向下三角效果*/ border: 5px solid #fff;
border-color: #fff transparent transparent; content:"";
  height: 0;
  position:absolute;
  right: 10px;
  top: 15px;
  width: 0;
}
.accordionMenu h2 a {/*制作手风琴标题栏效果*/
  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);
  background: linear-gradient( top, #cecece, #8f8f8f);
  border-radius: 5px;
  color:#424242;
  display: block;
  font-size: 13px;
  font-weight: normal;
  margin:0;
  padding:10px 10px;
  text-shadow: 2px 2px 2px #aeaeae;
  text-decoration:none;
}
.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);
  background: linear-gradient( top, #6bb2ff, #2288dd);
  color:#FFF;
}
.accordionMenu p {/*标题栏对应的内容*/
margin:0;
height: 0;/*默认栏目内容高度为0,达到隐藏效果*/ overflow: hidden;
padding:0 10px;
-moz-transition: height 0.5s ease-in; -webkit-transition: height 0.5s ease-in;
   2   CSS3     31
  
32
   -o-transition: height 0.5s ease-in;
  transition: height 0.5s ease-in;
}
/* 这部分是显示内容的关键代码 */
.accordionMenu :target p {/*展开对应目标内容*/
height:100px;/* 显示对应目标栏内容 */
  overflow: auto;
}
.accordionMenu :target h2:before {/*展开时标题三角效果*/ border-color: transparent transparent transparent #fff;
} </style>
</head>
<body>
<div class="accordionMenu">
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2> <p>Lorem ipsum dolor...</p>
</div>
<div class="menuSection" id="promotion">
<h2><a href="#promotion">Promotion</a></h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
<div class="menuSection" id="event"> <h2><a href="#event">Event</a></h2> <p>Lorem ipsum dolor sit amet...</p>
        </div>
  </div>
</body>
</html>


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

CSS3目标伪类选择器--实现简单手风琴效果

总结自:图解CSS3中的实战体验 以前制作手风琴效果需要依赖js脚本,功能强大的CSS3的目标伪选择器可以直接实现同样的效果。 通过目标伪类选择器“E:target”,显示和隐藏不同栏目内...
  • baidu_33864675
  • baidu_33864675
  • 2016-02-01 18:06
  • 1187

【JQuery】jQuery自制简易手风琴效果(附实现原理)

简易手风琴效果,附实现原理
  • LZGS_4
  • LZGS_4
  • 2015-08-30 09:48
  • 7474

全面解析Bootstrap手风琴效果

第二步:给面板添加内容,每个面板包括两个部分,第一个是面板标题 panel-heading,并且在这里面添加标题 panel-title。第二个部分是面板内容,也
  • QCIWYY
  • QCIWYY
  • 2016-08-04 08:57
  • 2111

纯css3实现美化复选框和手风琴效果(详细)

关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签。 然后用label标签作为容器,在里面放一个:before或一个after 用...
  • woshishui123aa
  • woshishui123aa
  • 2017-02-01 21:33
  • 102

纯css3实现美化复选框和手风琴效果(详细)

关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签。 然后用label标签作为容器,在里面放一个:before或一个after 用...
  • ceg6648
  • ceg6648
  • 2017-02-04 11:43
  • 314

纯CSS手风琴效果

纯CSS手风琴效果 其效果出自《css3图解》一书中。起初本人通过理解和跟着敲demo可以完美的实现我们想要的css手风琴效果。 PS:它不需要js去完成手风琴动画,使用纯CSS进行完成,...
  • qq_35515563
  • qq_35515563
  • 2017-03-01 11:54
  • 333

css3手风琴效果

1、html部分: 2、css3部分: 注: box-shadow:阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;    ...
  • whh_lydia
  • whh_lydia
  • 2015-07-14 16:57
  • 369

纯CSS实现手风琴效果

今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。
  • whqet
  • whqet
  • 2014-02-23 10:32
  • 7686

CSS3图像手风琴效果

  • 2012-06-26 16:19
  • 312KB
  • 下载

jquery、css、scss实现简单手风琴效果

  • 2016-11-21 14:49
  • 1.17MB
  • 下载
    个人资料
    • 访问:162372次
    • 积分:2580
    • 等级:
    • 排名:第16323名
    • 原创:80篇
    • 转载:146篇
    • 译文:0篇
    • 评论:13条
    文章分类
    最新评论