css3实现手风琴效果
来源:互联网 发布:网络推广专员骗局 编辑:程序博客网 时间:2024/05/16 05:32
<div class="accordionMenu"><div class="menuSeciton" id="brand"><h2><a href="#brand">brand</a></h2><p>Lorme ipsum dolor....</p></div><div class="menuSeciton" id="promotion"><h2><a href="#promotion">promotion</a></h2><p>Lorme ipsum dolor....</p></div><div class="menuSeciton" id="event"><h2><a href="#event">event</a></h2><p>Lorme ipsum dolor....</p></div></div>
<style>*{padding: 0; margin: 0;}a{text-underline: none;text-decoration: none;}.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: bold;margin: 0;padding: 10px 10px;text-shadow:2px 2px 2px #aeaeae;}.accordionMenu 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;overflow: hidden;padding: 0 10px;-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{height: 100px;overflow: auto;}.accordionMenu :target h2:before{ /*展开时标题三角图标*/border-color: transparent transparent transparent #fff;}</style>
0 0
- css3实现手风琴效果
- CSS3实现手风琴效果-------Day88
- css3实现的手风琴效果
- HTML+CSS3+JS 实现手风琴效果页面
- CSS3手风琴效果
- CSS3手风琴效果
- css3手风琴效果
- CSS3-手风琴效果
- css3手风琴效果diy
- 原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果
- CSS3目标伪类选择器--实现简单手风琴效果
- css3透明滑动手风琴效果
- juqery实现手风琴效果
- jquery实现手风琴效果
- 实现手风琴效果
- RecyclerView实现手风琴效果
- 手风琴效果实现
- jquery实现手风琴效果
- SDCycleScrollView的使用
- Python int与string之间的转化
- C#Thread的Join方法
- C 存储类/链接/内存管理
- EasyCamera摄像机配置
- css3实现手风琴效果
- 项目技巧笔记
- Intellij Idea中运行tomcat JRebel 报內存溢出 解决方案
- IOS Appstore 预览图尺寸
- reflect--反射
- Vani和Cl2捉迷藏 题解+代码
- leetcode No169. Majority Element
- php检测qq是否在线
- 聊下blink的剥离