当先锋百科网

首页 1 2 3 4 5 6 7

css盒子中如何制作推拉门

在网页设计中，推拉门效果经常被运用在导航栏、侧边栏等元素中，使页面更加美观、动态。这里我们就来学习一下在 CSS 盒子中如何制作推拉门效果。

css盒子中如何制作推拉门

首先，我们需要定义两个 div 标签来模拟推拉门的两片木板：


  
    <div class="door">
      <div class="door-1"></div>
      <div class="door-2"></div>
    </div>

接下来，在 CSS 中设置门的样式及动画：


  
    .door {
      position: relative;
      width: 250px;
      height: 200px;
      margin: 0 auto;
      overflow: hidden;
    }
    
    .door-1 {
      position: absolute;
      width: 125px;
      height: 200px;
      background-color: #ddd;
      transition: all 0.5s ease-in-out;
    }
    
    .door-2 {
      position: absolute;
      left: 125px;
      width: 125px;
      height: 200px;
      background-color: #555;
      transition: all 0.5s ease-in-out;
    }
    
    .door-1.open {
      transform: translateX(-125px);
    }
    
    .door-2.open {
      transform: translateX(125px);
    }

这里我们将 door-1 和 door-2 分别设置为左右两个 div，使用绝对定位来重叠在一起，overflow: hidden 隐藏超出部分的内容。然后我们为两个门添加了颜色和过渡效果。接下来，当 door-1.addClassName('open') 被调用时，door-1 就会向左移，door-2 向右移，从而产生推拉门效果。这里利用了 CSS 的 transform 属性。

最后，我们通过 JavaScript 来控制门的开关：


  
    var door = document.querySelector('.door');
    var door1 = document.querySelector('.door-1');
    var door2 = document.querySelector('.door-2');
    
    // 点击door元素触发开关门操作
    door.addEventListener('click', function () {
      if (door1.classList.contains('open')) {
        // 关门
        door1.classList.remove('open');
        door2.classList.remove('open');
      } else {
        // 开门
        door1.classList.add('open');
        door2.classList.add('open');
      }
    });

至此，一个完整的推拉门效果就完成了。我们可以自己尝试修改颜色、尺寸、动画时间等参数，来制作自己想要的效果。

推拉门cssdoor