用css来实现简单的手风琴效果

本文主要讲述的是用html+css来实现一个简单的手风琴案例，即可实现简单的展开/收起的功能

效果图：

HTML+CSS

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手风琴案例——看小说</title><style>*{margin: 0;padding: 0;}   body{background-color: #222;}.box{width: 500px;border: 2px solid rgb(110, 77, 0);margin: 200px auto;box-sizing: border-box;background-color: white;padding: 6px;}.box div{margin-bottom: 10px;}a{text-decoration: none;width: 98%;display: block;background: linear-gradient(rgb(97, 95, 95),rgb(139, 139, 139));height: 70px;border-radius: 5px;margin: 10px auto;position: relative;font: 16px/70px "宋体";text-indent: 10px;color: #000;letter-spacing: 4px;}i{display: block;width: 0;height: 0;border: 8px solid transparent;border-left-color: #fff;position: absolute;top: 27px;right: 18px;}p{height: 0px;width: 94%;overflow: hidden;margin: 0 auto;font: 14px/20px "宋体";text-indent: 28px;padding-right: 10px;letter-spacing: 2px;transition: height 1.5s;}#p4 a{text-align: center;}.box div:target p{overflow-y: scroll;height: 200px;}.box div:target a{background: skyblue;color: white;font-weight: 800;}.box div:target i{border-color: rgb(0, 0, 0) transparent transparent transparent;top: 30px;right: 20px;}.box a:active p{height: 0;}</style>
</head><body><div class="box"><div id="p1"><a href="#p1">剑来——第三百四十四章<i></i></a><p>埋河水神庙的庙祝老妪，是当地刺史府邸的亲信，除了刺史大人的引荐，她自己又花了许多家底银子，跟蜃景城礼部衙门打点关系，才得以占据这么个油水十足的位置，不知有多少练气士眼红，老妪先前以焚香高神的手段，跟碧游府告状，这会儿不用水神娘娘提点什么，自己就消停了，彻底没了报复的心思，不敢，万万不敢。</p></div><div id="p2"><a href="#p2">剑来——第三百四十五章<i></i></a><p>如钟魁所说，埋河女神总计炼化了九件兵器，其中两件跻身法宝之列，在与河妖厮杀的过程中，打坏了三件，那些都是她能够在两百多年内，稳稳压下河妖的制胜法宝，就是她的兵器数量实在多了点。世间女子出门郊游，是换脂粉、换衣裙，这位埋河水神娘娘，巡视辖境，是看心情选择兵器傍身。</p></div><div id="p3"><a href="#p3">剑来——第三百四十六章<i></i></a><p>裴钱说要去大门口那边看那堵影壁，上边庙里头的香火会飘，还有香味，水流会动，还有声响，太有意思了。水神娘娘大手一挥，招来一位妙龄婢女，带着裴钱去那边赏景。</p></div><div id="p4"><a href="#">别看了别看了，快去学习！</a></div></div>
</body></html>

用css来实现简单的手风琴效果相关推荐

用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
使用HTML+CSS完成一个简单的立体字效果
使用HTML+CSS完成一个简单的立体字效果* 此处用木兰辞来举列子来看看效果 ps:技术不佳大佬们轻喷 /*标题及其立体效果*/ .Header {/*font-size: 50px;*//*fo ...
jquery实现简单的手风琴效果
最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: htm ...
jQ效果：简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"><div class="item_box_wp"& ...
HTML+CSS+JavaScript实现简单的日历效果
初学前端花了一下午写了一个简单的日历效果: 可以选择按月或者按年切换,当前日期会有绿色的背景显示, 所有的日期都会正确的对应星期几. 所有代码: <!DOCTYPE html&g ...
使用css做一个简单的车轮滚滚效果
学了css之后发现很多效果只要几行代码就能实现,这个车轮滚滚的效果也不例外. 首先设置个大盒子,设置他的宽度(随意多少,但是肯定要比车轮的宽度大),高度与车轮保持一致即可.跟我一起来做个简单的车轮滚滚 ...
css+jq实现简单万花筒滚动效果
效果图如下: 代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
CSS+SVG实现简单的点赞效果
先看看效果图: 通过改变 svg 的 stroke 属性实现点赞效果 <template><div class="app-container"><la ...
手风琴效果（jQuery）
简单的手风琴效果实现实际比看起来简单,只是改变当前的元素宽度和其他元素的宽度,其代码如下(图片什么的都要换成自己噢) <!DOCTYPE html> <html lang=" ...

用css来实现简单的手风琴效果

用css来实现简单的手风琴效果相关推荐

最新文章

热门文章