如何使用 HTML 和 CSS 创建图像堆叠错觉?

htmlcssweb developmentfront end technology更新于 2024/5/12 13:32:17

在 Web 开发中，视觉错觉非常引人注目。在我们的网站中使用视觉错觉可以吸引用户，因为它可以玩弄他们的思维。它欺骗我们的大脑，让他们相信一些实际上并不存在的东西。这些错觉可以使用 CSS 中的各种技术来创建。最常用的错觉之一是图像堆叠错觉，它只是一种深度错觉。在本文中，我们将讨论仅使用 HTML 和 CSS 创建图像堆叠错觉的步骤。让我们开始吧。

什么是图像堆叠错觉?

图像堆叠错觉是一种视觉错觉，它通过将多张透明度不同的图像堆叠在一起而产生。当你从一个角度观看时，所有图像会相互混合，从而产生三维图像的错觉。

此效果以前是使用 Photoshop 制作的。然而，如今我们只需使用 HTML 和 CSS 即可轻松创建一个。

步骤

创建一个 div 元素，并在其中放入一张图片。这将是第一个堆叠的正面。
使用 border 和 box-shadow 属性为 img 元素设置样式。
为 div 元素分配尺寸 (class="stack1")。保持 div 元素的 relative 位置不变，这样接下来的伪元素(:before 和 :after 元素)的 position 将保持相对于 div 元素的相对位置，而不是页面，因为我们将保持这些伪元素的绝对位置不变。将 div 元素向左浮动。为其添加外边距和内边距以获得更佳外观。
使用属性 ":before" 添加堆栈的第一个伪元素。不要向其添加内容。指定其尺寸并赋予其绝对定位。使用 background-color、box-shadow 和 border 属性设置其样式。
将伪元素的 z-index 保持为 -1。指定不同的 top 和 left 值，使其处于不同的位置并产生不同的视觉效果。您还可以旋转伪元素以观察不同的效果。
使用属性 ":after" 创建第二个伪元素。其样式与第一个伪元素类似。只需更改 top、left 和 transform 值即可创建视觉效果。这样就完成了您的第一个堆栈。
同样，您可以在一个网页中创建尽可能多的堆栈。这里，我们在一个页面中创建了两个堆栈。

示例

在此示例中，我们创建了一个图像堆栈。对于堆栈，我们将 :before 伪元素的 top、left 和 transform 值分别保留为 -15px、-15px 和 rotate(-10deg)，而将 :after 伪元素的 5px、0 和 rotate(10deg)。为每个伪元素指定不同的背景颜色，以增强效果。

<html>
<head>
   <style>
      * {
         margin: 0;
         padding: 0;
      }
      body {
         background-color: #B9C8BC;
      }
      img {
         height: 253px;
         width: 262px;
         border: 10px solid white;
         box-shadow: 4px 4px 4px grey;
      }
      h1 {
         text-align: center;
         text-decoration: underline;
         font-family: Georgia;
      }
      .stack1,
      .stack2,
      .stack3 {
         float: left;
         position: relative;
         margin: 65px;
         padding: 3px;
      }
      .stack1:before,
      .stack1:after {
         content: "";
         border: 10px solid white;
         position: absolute;
         z-index: -1;
      }
      .stack1 {
         height: 250px;
         width: 260px;
      }
      .stack1:before {
         height: 280px;
         width: 260px;
         background-color: grey;
         top: -15px;
         left: -15px;
         transform: rotate(-10deg);
         box-shadow: 4px 2px 4px #9a2ca0;
      }
      .stack1:after {
         height: 250px;
         width: 260px;
         background-color: #808000;
         top: 5px;
         left: 0;
         transform: rotate(10deg);
         box-shadow: 4px 2px 4px #9a2ca0;
      }
   </style>
</head> 
<body>  
   <h1> Image Stack Illusion </h1>
   <div class="stack1">
      <img src="https://www.cainiaomax.com/images/physics-tutorials_icon.svg">
   </div>
</body>
</html>

我们可以在网页设计中哪些地方使用图像堆叠错觉?

在网页设计中，图像堆叠错觉可用于创建各种令人惊叹的视觉布局。它可以用于制作引人注目的图片库和引人入胜的产品广告页面。此外，设计师还可以使用它来展示他们的作品集。各行各业和大型企业都可以将此效果融入到他们的落地页设计中。

结论

图像堆叠错觉在网页开发、广告和平面设计中被广泛使用。大量用户的青睐促使开发人员创作更多此类引人注目的视觉效果。此外，我们不再依赖 Photoshop 应用程序来实现这种效果。我们只需使用 HTML 和 CSS 即可轻松创建。在本文中，我们使用伪类(:before 和 :after)来实现所需的效果。我们在本文中展示了 6 种不同的错觉。然而，还有更多的可能，您需要做的就是练习并按照这里讨论的相同步骤创建自己的视觉效果。