纯css完成手风琴效果

编程入门行业动态更新时间:2024-10-27 00:31:35

纯css完成<a href=https://www.elefans.com/category/jswz/34/1627632.html style= 手风琴效果"/>

纯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>