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

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

什么是图像堆叠幻觉

图像堆叠幻觉是一种视觉错觉，通过将多个图像叠放在彼此之上并具有不同的透明度来创建。当您从一个角度观看时，所有图像会混合在一起，创造出三维图像的错觉。

以前，这种效果是使用Photoshop完成的。但是，现在我们可以简单地使用HTML和CSS来创建一个。

需要遵循的步骤

创建一个带有图像的div元素。这将是第一个图像堆叠的正面。
使用border和box-shadow属性为img元素添加样式。
为div元素（class=”stack1″）分配尺寸。将div元素的位置保持为relative，以便即将出现的伪元素(:before和:after元素)的位置相对于div元素而不是页面。将div元素向左浮动。添加margin和padding以使其外观更好。
使用属性”:before”添加堆叠的第一个伪元素。不要为其添加内容。为其分配尺寸并给予绝对定位。使用background-color、box-shadow和border属性对其进行样式设置。
将伪元素的z-index设为-1。给它不同的top和left值，以赋予它不同的位置并创建不同的幻觉。您还可以旋转伪元素以观察不同的效果。
使用属性”:after”创建第二个伪元素。将其样式设置为与第一个伪元素类似。只需更改top、left和transform的值即可创建视觉幻觉。这完成了第一个堆叠。
类似地，您可以在网页中创建尽可能多的堆叠。在这里，我们在一个页面中创建了2个堆叠。

示例

在这个例子中，我们创建了一个图像堆叠。对于这个堆叠，我们保留了 top, left 和 transform 的值为 -15px, -15px 和 rotate(-10deg) 用于 :before 伪元素，而对于 :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.tutorialspoint.com/images/physics-tutorials_icon.svg">
   </div>
</body>
</html>

在网页设计中可以在哪里使用图像堆叠幻觉

在网页设计中，图像堆叠幻觉可以用于创建各种令人惊叹的视觉布局。它可以用于创建引人注目的图像库和引人入胜的产品广告页面。设计师还可以使用它来展示自己的作品集。行业和大型企业可以使用这种效果来创建登录页面。

结论

图像堆叠幻觉在网页开发、广告和平面设计中被广泛使用。很多用户的吸引力促使开发人员创造更多这样引人注目的视觉效果。此外，我们不再完全依赖于Photoshop应用程序来实现这种效果。我们可以只使用HTML和CSS来轻松实现。在本文中，我们使用了伪类( :before和:after)来实现所需的效果。在本文中，我们介绍了6种不同的幻觉效果。然而，还有很多可能性，你只需要不断练习并按照本文所讨论的步骤创建自己的视觉效果。