效果

html部分

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>纯HTML和CSS实现垂直手风琴菜单列表</title><link rel="stylesheet" href="style.css" /></head><body><div class="box"><div class="box-item"><p class="title">账户</p><ul class="box-item-content"><li>Account</li><li>Account</li><li>Account</li></ul></div><div class="box-item"><p class="title">信息</p><ul class="box-item-content"><li>Messages</li><li>Messages</li><li>Messages</li></ul></div><div class="box-item"><p class="title">设置</p><ul class="box-item-content"><li>Settings</li><li>Settings</li><li>Settings</li></ul></div><div class="box-item"><p class="title">退出</p><ul class="box-item-content"><li>Logout</li><li>Logout</li><li>Logout</li></ul></div></div></body>
</html>

CSS部分

*{margin: 0;padding: 0;
}
body {background: #f192dd;
}
.box {margin: 100px auto;width: 20%;background-color: #2a9ead;
}
.box .box-item  {border-bottom: 1px solid #2980b9;color: #eee;
}
.box .title {padding: 10px;background-color: #2a9ead;cursor: pointer;
}
.box-item-content {cursor: pointer;height: 0;overflow: hidden;background-color: #1abc9c;transition: .5s all;
}
ul {list-style: none;
}
ul li {padding: 5px 15px;cursor: pointer;line-height: 1.5;
}
ul li:hover{background-color: #2980b9;
}
.box:hover .box-item:hover .box-item-content {height: 100px;
}

纯CSS实现手风琴效果（附演示）相关推荐

纯css实现手风琴效果_创建纯CSS手风琴的4种方法
内容手风琴是一种有用的设计模式. 您可以将它们用于许多不同的事物:用于菜单,列表,图像,文章摘录,文本片段甚至视频那里的大多数手风琴都依赖JavaScript,主要是jQuery ,但是由于高级CS ...
快递信息css3手风琴代码_用纯CSS实现手风琴效果的示例代码
昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求.需要把一组图片形成手风琴的展示效果.认真的思考一遍后,决定就用普通的HTML+CSS就可以实现这个需求.今天趁着空闲时间稍微梳理了一下 ...
css实现手风琴效果
在很多页面布局中,都运用到了手风琴效果,大部分都是js来实现的,今天使用纯css实现手风琴效果,其中用到了弹性盒布局.定位和伪类效果图如下: 实现此效果代码如下 html: <body> ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
css3波浪纹路_纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html实现开关,使用纯css实现开关效果
首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则关闭开关选中,则打开开关开始画出off.on状态的草图 ...
HTML、CSS实现手风琴效果
HTML.CSS实现手风琴效果 1 展示 2代码 2.1 HTML 2.2 CSS 3解释 1 展示点击前往在线展示 2代码 2.1 HTML <!DOCTYPE html> <h ...
如何用纯 CSS 实现优惠券效果
背景本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...

纯CSS实现手风琴效果（附演示）

手风琴

效果

html部分

CSS部分

纯CSS实现手风琴效果（附演示）相关推荐

最新文章

热门文章