使用CSS3实现百叶窗效果

要使用CSS3实现百叶窗效果，我们可以利用CSS的transform和transition属性，结合HTML结构来创建。以下是一个简单的示例，展示了如何使用CSS3实现百叶窗效果：

HTML 结构

<div class="shutter">
  <div class="shutter-blade"></div>
  <div class="shutter-blade"></div>
  <div class="shutter-blade"></div>
  <!-- 更多的 shutter-blade 可以根据需要添加 -->
</div>

CSS 样式

.shutter {
  width: 300px; /* 百叶窗的总宽度 */
  height: 200px; /* 百叶窗的总高度 */
  position: relative;
  overflow: hidden; /* 隐藏超出部分 */
}

.shutter-blade {
  width: 100%; /* 每片叶子的宽度 */
  height: 20px; /* 每片叶子的高度，可以根据需要调整 */
  background-color: #000; /* 叶子的颜色 */
  position: absolute;
  left: 0;
  transition: transform 0.5s ease; /* 过渡效果 */
}

.shutter-blade:nth-child(1) { top: 0; }
.shutter-blade:nth-child(2) { top: 40px; }
.shutter-blade:nth-child(3) { top: 80px; }
/* 为更多的叶子设置 top 值，确保它们均匀分布 */

/* 添加一个类来控制百叶窗的打开和关闭状态 */
.shutter.open .shutter-blade {
  transform: translateX(-100%); /* 当百叶窗打开时，将叶子移动到左侧 */
}

JavaScript 控制（可选）

如果你想通过点击按钮或其他交互方式来控制百叶窗的打开和关闭，你可以使用JavaScript来添加或删除open类。以下是一个简单的示例：

<button id="toggleButton">打开/关闭百叶窗</button>

document.getElementById('toggleButton').addEventListener('click', function() {
  var shutter = document.querySelector('.shutter');
  shutter.classList.toggle('open'); // 切换 open 类
});