css3写下拉列表展开

本文详细介绍了如何利用CSS3的属性和过渡效果,实现下拉列表的动态展开和收起,增强了用户体验。通过设置适当的选择器和动画时间,创建了平滑的展开动画。

这里写图片描述

<div class="wrapper">
            <div class="harf">
                <aside class="tab">
                    <input id="tab-one" type="checkbox" name="tabs" />
                    <label for="tab-one">Label One</label>
                    <div class="tab-content">
                        <p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
                    </div>
                </aside>
                <aside class="tab">
                    <input id="tab-two" type="checkbox"  name="tabs"/>
                    <label for="tab-two">Label two</label>
                    <div class="tab-content">
                        <p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
                    </div>
                </aside>
                <aside class="tab">
                    <input id="tab-thress" type="checkbox" name="tabs" />
                    <label for="tab-thress">Label Three</label>
                    <div class="tab-content">
                        <p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
                    </div>
                </aside>
            </div> <!--harf end-->
            <div class="harf">
                <div class="tab blue">
                    <input id="tab-four" type="radio" name="tabs2" />
                    <label for="tab-four">label four</label>
                    <div class="tab-content">
                        <p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
                    </div>
                </div>
                <div class="tab blue">
                    <input id="tab-five" type="radio" name="tabs2" />
                    <label for="tab-five">label five</label>
                    <div class="tab-content">
                        <p>少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天。少无适俗韵,性本爱丘山。林下漏月光,疏疏如残雪.长亭外古道边,芳草碧连天</p>
                    </div>
                </div>
            </div>
        </div>

css代码:

.wrapper{
    width: 500px;
}
.harf{
    margin-bottom: 20px;
}
.tab{
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    color: #fff;
    overflow: hidden;
}
input{
    position: absolute;
    opacity: 0;
    z-index: -1;
}
label{
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    background: #16A085;
    font-weight: bold;
    line-height: 3;
    cursor: pointer;
}
.blue label{
    background: #2980B9;
}
.tab-content{
    max-height: 0em;
    overflow: hidden;
    background: #1ABC9C;
    -webkit-transition: max-height .35s;
    transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p{
    margin: 1em;
}
input:checked ~ .tab-content{
    max-height: 10em;
}
label::after{
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3em;
    text-align: center;
    -webkit-transition: all .35s;
    transition: all .35s;
}
input[type=checkbox] + label:after{
    content: "+";
}
input[type=checkbox]:checked + label:after{
    -webkit-transform:rotate(315deg) ;
}
input[type=radio] + label::after {
     content: "\25BC";
}
input[type=radio]:checked + label::after{
     -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值