漂亮CSS学习专辑(二)垂直手风琴这样也是自己得一个学习笔记，跟着大佬敲一次。冲鸭!

这是CSS学习第二集这次是垂直手风琴效果

用户id：阿阳热爱前端视频地址：www.bilibili.com/video/BV1nf…

这样也是自己得一个学习笔记，跟着大佬敲一次。冲鸭!

效果图

代码区

里面有使用到文字图标，例如iconfont

html

<!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>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont.css">
</head>
<body>
    <!-- ul.accrodion>li*4>input:radio[id='item$' name='item']+(label{一级标题$}[for='item$']>i.iconfont.icon-jiantou)+ol>li{二级标题$}*4 -->
    <ul class="accrodion">
        <li>
            <input type="radio" name="item" id="item1"><label for="item1">一级标题1<i class="iconfont icon-jiantou"></i></label>
            <ol>
                <li>二级标题1</li>
                <li>二级标题2</li>
                <li>二级标题3</li>
                <li>二级标题4</li>
            </ol>
        </li>
        <li>
            <input type="radio" name="item" id="item2"><label for="item2">一级标题2<i class="iconfont icon-jiantou"></i></label>
            <ol>
                <li>二级标题1</li>
                <li>二级标题2</li>
                <li>二级标题3</li>
                <li>二级标题4</li>
            </ol>
        </li>
        <li>
            <input type="radio" name="item" id="item3"><label for="item3">一级标题3<i class="iconfont icon-jiantou"></i></label>
            <ol>
                <li>二级标题1</li>
                <li>二级标题2</li>
                <li>二级标题3</li>
                <li>二级标题4</li>
            </ol>
        </li>
        <li>
            <input type="radio" name="item" id="item4"><label for="item4">一级标题4<i class="iconfont icon-jiantou"></i></label>
            <ol>
                <li>二级标题1</li>
                <li>二级标题2</li>
                <li>二级标题3</li>
                <li>二级标题4</li>
            </ol>
        </li>
    </ul>
</body>
</html>

css

*{

    padding: 0;
    margin: 0;

    box-sizing: border-box;
}

body{

    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

li{
    list-style: none;
}

.accrodion{
    overflow: hidden;
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

.accrodion > li {
    width: 100%;
}

.accrodion > li input{
    /* 隐藏单选按钮，表单美化 */
    display: none;
  
}

.accrodion > li label{
    color: white;
    position: relative;
    display: block;
    width: 100%;
    background-color: #5fb878;
    padding: 20px 50px;
    cursor: pointer;
} 

.accrodion > li label i {
    position: absolute;
    left: 20px;
    top: calc(50% - 8px);
    transition: all .5s;
}

.accrodion > li label::after{
    content: '';
    position: absolute;
    right: 20px;
    bottom: -14px;
    width: 30px;
    height: 15px;
    background-color: inherit;

    clip-path: polygon(0 0,100% 0,50% 100%);
}

.accrodion > li label:hover{
    background-color: #53aa6c;
}

.accrodion >li:not(:first-child) label{
    border-top: 1px solid #38814d;
}
.accrodion >li ol{
    width: 100%;
    background-color: #333;
}
.accrodion >li ol li{
    position: relative;
    color: white;
    height: 0px;
    line-height: 50px;
    padding-left: 20px;
    transition: all .5s ;
    
}

.accrodion>li ol li::before{
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    width: 5px;
    height: 4px;
    height: 44px;
    background-color: #5fb878;
    /* y轴缩放 */
    transform: scaleY(0);
    transition: all .3s;
}

.accrodion>li ol li:hover::before{
    transform: scaleY(1);
}

.accrodion>li input:checked ~ label i{
    color:burlywood;
    transform: rotate(90deg);
}

.accrodion>li input:checked ~ ol li{
    height: 50px;
}