css简易手风琴效果

最新推荐文章于 2024-08-13 14:51:58 发布

原创最新推荐文章于 2024-08-13 14:51:58 发布 · 383 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css #css3

页面布局专栏收录该内容

16 篇文章

订阅专栏

用css完成简易手风琴效果，可以利用锚点链接来切换显示的色块。

a标签为按钮，用来控制哪个盒子拉出
要想用transition增加动画效果需要给盒子初始高度为0，就会有缓慢下拉动画效果。

<style>
    .box {
      margin: 50px auto;
      width: 500px;
      height: 600px;
      border: 1px solid #000;
    }

    #box1,
    #box2,
    #box3 {
      height: 0;
    }

    a {
      display: block;
      width: 100%;
      height: 40px;
      background: #000;
      color: #fff;
      text-align: center;
      line-height: 40px;
      text-decoration: none;
    }

    #box1:target {
      width: 100%;
      height: 450px;
      background: pink;
      transition: 1s;
    }

    #box2:target {
      width: 100%;
      height: 450px;
      background: green;
      transition: 1s;
    }

    #box3:target {
      width: 100%;
      height: 450px;
      background: skyblue;
      transition: 1s;
    }
  </style>
</head>

<body>
  <div class="box">
    <a href="#box1">1</a>
    <div id="box1"></div>
    <a href="#box2">2</a>
    <div id="box2"></div>
    <a href="#box3">3</a>
    <div id="box3"></div>
  </div>

效果图