纯CSS实现图片百叶窗展示效果示例

下面我将详细讲解“纯CSS实现图片百叶窗展示效果”的完整攻略。

什么是百叶窗效果

百叶窗，顾名思义就是由许多个竖向的条条组成的一种窗形式。在网站设计中，可以将百叶窗效果用于图片展示，使页面更具有视觉冲击力。

CSS实现百叶窗效果步骤

HTML结构搭建

为了方便CSS样式的实现，我们需要先搭建好HTML结构。这里我们以展示3张图片为例：

<div class="wrapper">
  <div class="blinds">
    <div class="blind"></div>
    <div class="blind"></div>
    <div class="blind"></div>
  </div>
  <img class="image" src="image1.jpg" />
  <img class="image" src="image2.jpg" />
  <img class="image" src="image3.jpg" />
</div>

在结构中，.wrapper是一个包裹所有内容的容器，.blinds是为百叶窗生成的容器，.blind是各个条状体的容器，.image是需要展示的图片。

CSS样式实现

在HTML结构搭建好后，我们需要修改CSS样式。下面是一个完整的实现百叶窗效果的CSS样式：

.wrapper {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.blinds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow: hidden;
  background-color: white;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

.blind {
  width: 33%;
  height: 100%;
  background-color: white;
  transform-origin: left;
  transform: skew(-45deg);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}

.image {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: -1;
}

在上面的CSS样式中，.wrapper设置为相对定位并且设置了四个方向的边距和边框，在.blinds的样式中，设置了绝对定位以及所在位置的左上角，宽高为100%，同时使用了flex布局，因此.blind中的高度和.blinds一致。

在.blind的样式中，设置了宽为33%，高为100%，并使用transform: skew(-45deg)方法将竖直的条条变为斜线条，transform-origin: left;是用来设置每个百叶窗平均分配高度。

在最后一个.image的样式中，使用了z-index: -1;，让图片在实现百叶窗效果的时候不被覆盖。

JavaScript实现交互效果（可选）

在上述步骤完成后，我们可以得到一个静态的百叶窗效果展示，为了让效果更加生动，我们也可以使用JavaScript来实现交互效果。

例如，我们可以使用setInterval()方法，让百叶窗条条依次打开和关闭，实现动态的展示效果。下面是一个示例代码：

let blinds = document.querySelectorAll(".blind");

let speed = 200;
let delay = 4000;
let isOpen = false;

setInterval(() => {
  if (isOpen) {
    blinds.forEach((blind) => {
      blind.style.transform = "skew(-45deg)";
    });
    isOpen = false;
  } else {
    for (let i = 0; i < blinds.length; i++) {
      setTimeout(() => {
        blinds[i].style.transform = "skew(-45deg) translateY(-100%)";
      }, speed * i);
    }
    isOpen = true;
  }
}, delay);

在上述代码中，我们使用了setInterval()方法，每隔一段时间触发一次交互效果。

在setInterval()方法的中，我们使用了一个开关变量isOpen来记录是否已经打开状态，并使用if else语句来切换百叶窗的状态。打开和关闭的方法都在.blind的样式中设置完成，所以这里直接修改了transform的值即可。

另外，我们还使用了setTimeout(() => {...}, speed * i)，在每个盲板切换时都会调用该方法，因此它们会分别在不同的时间点打开。

示例1

这是一个通过纯CSS实现的简单的百叶窗图片展示效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>纯CSS实现百叶窗效果</title>
  <style>
    .wrapper {
      position: relative;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .blinds {
      height: 200px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
    }
    .blind {
      width: 30px;
      background-color: white;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
      transform-origin: left;
      transform: skew(-45deg);
      margin-right: -15px;
    }
    .image {
      width: 200px;
      height: 200px;
      object-fit: cover;
    }
    .image:nth-child(2) {
      transform: translateX(30px);
    }
    .image:nth-child(3) {
      transform: translateX(60px);
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="blinds">
      <div class="blind"></div>
      <div class="blind"></div>
      <div class="blind"></div>
    </div>
    <img class="image" src="https://picsum.photos/id/100/200/200" alt="image1">
    <img class="image" src="https://picsum.photos/id/101/200/200" alt="image2">
    <img class="image" src="https://picsum.photos/id/102/200/200" alt="image3">
  </div>
</body>
</html>

示例2

这是一个更复杂的通过CSS实现的百叶窗效果，在例子中还包含了交互效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>纯CSS实现百叶窗动画效果</title>
  <style>
    .wrapper {
      position: relative;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .blinds {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      overflow: hidden;
      background-color: white;
      box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    }
    .blind {
      width: 33%;
      height: 100%;
      background-color: white;
      transform-origin: left;
      transform: skew(-45deg);
      box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    }
    .image {
      position: relative;
      width: 100%;
      height: auto;
      object-fit: cover;
      z-index: -1;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="blinds">
      <div class="blind"></div>
      <div class="blind"></div>
      <div class="blind"></div>
    </div>
    <img class="image" src="https://picsum.photos/id/100/800/800" alt="">
    <img class="image" src="https://picsum.photos/id/101/800/800" alt="">
    <img class="image" src="https://picsum.photos/id/102/800/800" alt="">
  </div>

  <script>
    let blinds = document.querySelectorAll(".blind");

    let speed = 200;
    let delay = 4000;
    let isOpen = false;

    setInterval(() => {
      if (isOpen) {
        blinds.forEach((blind) => {
          blind.style.transform = "skew(-45deg)";
        });
        isOpen = false;
      } else {
        for (let i = 0; i < blinds.length; i++) {
          setTimeout(() => {
            blinds[i].style.transform = "skew(-45deg) translateY(-100%)";
          }, speed * i);
        }
        isOpen = true;
      }
    }, delay);
  </script>
</body>
</html>

如上图所示，当鼠标悬停在区域内时，会触发JavaScript事件，从而展示动态效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯CSS实现图片百叶窗展示效果示例 - Python技术站

纯CSS实现图片百叶窗展示效果示例

什么是百叶窗效果

CSS实现百叶窗效果步骤

示例1

示例2

相关文章