css简易手风琴效果

最新推荐文章于 2023-08-22 01:19:52 发布

weixin_47304385

最新推荐文章于 2023-08-22 01:19:52 发布

阅读量90

点赞数

分类专栏： css页面布局文章标签： css css3 动画

本文链接：https://blog.csdn.net/weixin_47304385/article/details/125133179

版权

css页面布局专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.可以利用锚点连接来切换盒子
a标签为连接用来切换盒子
2.如果想要有更好的体验可以给需要切换的盒子添加动画属性
transition 但需要设置盒子初始高度为0，这样就有缓慢下拉的效果了

*{
            margin: 0;padding: 0
        }
        .box{
            width: 186px;
            height: 600px;
            border: 1px solid #000;
        }
        a{
            display: block;
            height: 40px;
            border-bottom: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            font-size: 12px;
            color: #000
        }
        .box div{
            height: 0;
            transition: 0.8s
        }
        div:target{
            height: 200px;
            background: pink
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#box1">教学系统</a>
        <div id="box1">
            
        </div>
        <a href="#box2">班级管理</a>
        <div id="box2"></div>
        <a href="#box3">就业管理</a>
        <div id="box3"></div>
        <a href="#box4">效能管理</a>
        <div id="box4"></div>
        <a href="#box5">教学管理</a>
        <div id="box5"></div>
    </div>
</body>