介绍 & lt; section 类=癰lock"比;
,,,& lt; input 类型=癱heckbox"比;
,,,& lt; div 类=癱ase-block"比;
,,,,,& lt; div>展开& lt;/div>
,,,,,& lt; div>收起& lt;/div>
,,,& lt;/div>
,,,& lt; div 类=癲etail"比;
,,,,,& lt; div>唧唧复唧,唧木兰当户织。不闻机杼声,惟闻女叹息。(惟闻,通:唯)问女何所思,问女何所忆,女亦无所思,女亦无所忆。昨夜见军帖,可汗大点兵,军书十二卷,卷卷有爷名。阿爷无大儿,木兰无长兄,愿为市鞍的马,从此替爷征。(惟闻
,,,,,,,通:唯)& lt;/div>
,,,,,& lt; div>东市买骏马,西市买鞍,鞯南市买辔头,北市买长鞭。旦辞爷娘去,暮宿黄河边,不闻爷娘唤女声,但闻黄河流水鸣溅溅。旦辞黄河去,暮至黑山头,不闻爷娘唤女声,但闻燕山胡骑鸣啾啾。;/div>
,,,,,& lt; div>万里赴戎机,关山度若飞。朔气传金柝,寒光照铁衣。将军百战死,壮士十年归。;/div>
,,,,,& lt; div>归来见天子,天子坐明堂。策勋十二转,赏赐百千强。可汗问所欲,木兰不用尚书郎,愿驰千里足,送儿还故乡。(一作:愿借明驼千里足)& lt;/div>
,,,,,& lt; div>爷娘闻女来,出郭相扶将;阿姊闻妹来,当户理红妆;小弟闻姊来,磨刀霍霍向猪羊。开我东阁门,坐我西阁床,脱我战时袍,著我旧时裳。当窗理云鬓,对镜帖花黄。出门看火伴,火伴皆惊忙:同行十二年,不知木兰是女郎。(帖
,,,,,通:贴;惊忙一作:惶;惶,火伴,通:伙)& lt;/div>
,,,,& lt; div>雄兔脚扑朔,雌兔眼迷离;双兔傍地走,安能辨我是雄雌? & lt;/div>
,,,& lt;/div>
& lt;才能/section> @charset “UTF-8";
.title-block {
,,,身高:,26 px;
,,,text-align:,中心;
}
.block {
,,,显示:,-webkit-box;
,,,显示:,-ms-flexbox;
,,,显示:,flex;
,,,-webkit-box-orient:,垂直的;
,,,-webkit-box-direction:,反向;
,,,-ms-flex-flow:, column-reverse nowrap;}
,,,flex-flow:, column-reverse nowrap;}
,,,宽度:,360 px;
,,,保证金:,0,汽车;
,,,字体大小:,14 px;
,,,颜色:,# 4 c4c4c;
,,,行高:,28 px;
边境:,,,,1 px solid # 999;
,,,填充:,10 px;
}
.block 祝辞,.detail {
,,,max-height:, 163 px;
,,,margin-bottom:, 10 px;
,,,溢出:,隐藏;
}
.block 祝辞,.case-block {
,,,显示:,-webkit-box;
,,,显示:,-ms-flexbox;
,,,显示:,flex;
,,,-webkit-box-pack:,中心;
,,,-ms-flex-pack:,中心;
,,,justify-content:,中心;
,,,-webkit-box-align:,中心;
,,,-ms-flex-align:,中心;
,,,对齐项目:,中心;
,,,宽度:,120 px;
,,,身高:,24 px;
,,,保证金:,0,auto 0;
,,,颜色:,# 0 e0e0e;
,,,背景:,# fff;
边境:,,,,1 px solid # 0 e0e0e;
,,,这个特性:,5 px;
}
.block 祝辞,.case-block div: nth-of-type (1), {
,,,显示:,块;
}
.block 祝辞,.case-block div: nth-of-type (2), {
,,,显示:,没有;
}
.block 祝辞,(type=癱heckbox"), {
,,,位置:,相对;
,,,显示:,块;
,,,宽度:,120 px;
,,,身高:,24 px;
,,,保证金:,-24 px auto 0;
,,,z - index:, 1000;
,,,不透明度:,0;
}
.block 祝辞,[类型=癱heckbox"]: hover +, .case-block {
background - color,,,,, # f5f5f5;
}
.block 祝辞,[类型=癱heckbox"]: checked +, .case-block div: nth-of-type (1), {
,,,显示:,没有;
}
.block 祝辞,[类型=癱heckbox"]: checked +, .case-block div: nth-of-type (2), {
,,,显示:,块;
}
.block 祝辞,[类型=癱heckbox"]: checked +, .case-block +, .detail {
,,,max-height:,继承;
null
这篇文章给大家分享的是有关纯CSS3如何实现移动端展开和收起效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
展示效果:
HTML代码
CSS代码
