如何使用 HTML 和 CSS 创建 Image Stack Illusion？

介绍

Image Stack Illusion 是一种视觉错觉，它让多张图像垂直重叠，并根据鼠标位置进行滚动，从而给人以多层图像叠放的效果。

本文将介绍如何使用 HTML 和 CSS 实现 Image Stack Illusion。

实现步骤

1. 准备图片资源

首先，我们需要准备多张需要叠放的图片资源。这些图片可以是同样大小的，也可以是不同的大小。我们下文将以三张同样大小的图片为例。

2. 编写 HTML 代码

<div class="image-stack-container">
  <div class="image-stack">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
    <img src="img3.jpg" alt="">
  </div>
</div>

代码说明：

• image-stack-container 是一个包含图片的容器，用于设置容器的高度并让其具有滚动条。
• image-stack 是一个包含多张图片的容器，用于实现图片叠放效果。
• img 用于引用图片资源。

3. 编写 CSS 代码

body {
  margin: 0;
  padding: 0;
}

.image-stack-container {
  height: 100vh;
  overflow-y: scroll;
}

.image-stack {
  position: relative;
  width: 100%;
  height: 300%;
  transform: translateZ(0);
}

img {
  position: absolute;
  left: 50%;
  top: -50%;
  transform: translate(-50%, -50%);
}

img:first-child {
  filter: grayscale(100%) contrast(150%) brightness(80%);
}

img:last-child {
  filter: grayscale(100%) contrast(200%) brightness(120%);
}

img:hover {
  transform: scale(1.3);
  z-index: 1;
}

代码说明：

• body 用于消除网页的默认外边距和内边距。
• .image-stack-container 用于设置容器的高度和滚动条，其中 height: 100vh; 表示容器高度为浏览器窗口高度，overflow-y: scroll; 表示容器出现垂直滚动条。
• .image-stack 用于实现图片的垂直叠放效果，其中 position: relative; 表示相对定位，width: 100%; 表示宽度为容器宽度，height: 300%; 表示高度为容器高度的三倍，transform: translateZ(0); 表示使用 3D 变形，以防止图片出现奇怪的闪烁现象。
• img 用于设置图片的位置和大小，其中 position: absolute; 表示绝对定位，left: 50%; 表示左边距为父容器的 50%，top: -50%; 表示上边距为父容器的 -50%（即图片高度的一半），transform: translate(-50%, -50%); 表示将图片居中。
• img:first-child 用于设置第一张图片的滤镜效果，其中 filter: grayscale(100%) contrast(150%) brightness(80%); 表示将图片变为灰色，并增加对比度和亮度。
• img:last-child 用于设置最后一张图片的滤镜效果，其中 filter: grayscale(100%) contrast(200%) brightness(120%); 表示将图片变为灰色，并大幅增加对比度和亮度。
• img:hover 用于设置鼠标在图片上的效果，其中 transform: scale(1.3); 表示将图片放大 1.3 倍，z-index: 1; 表示将图片置于顶层。

结论

通过使用 HTML 和 CSS，我们可以轻松实现 Image Stack Illusion，从而给用户带来更美观而独特的视觉体验。