手风琴效果"/>
纯css完成手风琴效果
代码
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直手风琴</title><style>.menuBox {background: #fff;color: #424242;font-size: 14px;margin: 0 auto;padding: 10px;width: 500px;}.menuBox h2 {margin: 5px 0;padding: 0;position: relative;}/* 制作向下的三角效果 */.menuBox h2:before {border: 5px solid #fff;border-color: #fff transparent transparent;content: "";height: 0;position: absolute;right: 10px;top: 15px;width: 0;}/* 制作手风琴标题栏效果 */.menuBox h2 a {background: #8f8f8f;background: linear-gradient(top, #cecece, #8f8f8f);border-radius: 5px;color: #424242;display: block;font-size: 14px;font-weight: normal;margin: 0;padding: 10px;text-shadow: 2px 2px 2px #aeaeae;text-decoration: none;}/* 目标标题的效果 */.menuBox :target a,.menuBox h2 a:focus,.menuBox h2 a:hover,.menuBox h2 a:active {background: #2288bb;background: linear-gradient(top, #6bb2ff, #2288dd);color: #fff;}/* 标题栏对应的内容 */.menuBox p {margin: 0;height: 0;/* 默认高度为0,达到隐藏的效果 */overflow: hidden;padding: 0 10px;transition: height 0.5s ease-in;}/* 显示内容的关键性代码 显示且展开对应目标内容*/.menuBox :target p {height: 100px;overflow: hidden;}/* 展开标题的三角形效果 */.menuBox :target h2:before {border-color: transparent transparent transparent #fff;}</style>
</head><body><div class="menuBox"><div class="menuSection" id="new"><h2><a href="#new">最新资讯</a></h2><p>最新资讯......</p></div><div class="menuSection" id="technology"><h2><a href="#technology">最新技术</a></h2><p>最新技术......</p></div><div class="menuSection" id="Quotations"><h2><a href="#Quotations">经典语录</a></h2><p>经典语录......</p></div></div>
</body></html>
效果
知识点分析
css3选择器的种类(五类)
第一类: 基本选择器
第二类: 层次选择器
第三类: 伪类选择器
- 动态伪类选择器
- 目标伪类选择器
- 语言伪类选择器
- UI元素状态伪类选择器
- 结构伪类选择器
- 否定伪类选择器
第四类: 伪元素
第五类: 属性选择器
用到的元素选择器
基本选择器
①元素选择器
②类选择器
③群组选择器
层次选择器
①后代选择器(包含选择器)
伪类选择器
①动态伪类选择器 :focus,:hover,:active
②目标伪类选择器 :target
③语言伪类选择器 lang=“zh-cn”
伪类选择器
①伪元素::before
更多推荐
纯css完成手风琴效果
发布评论