数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 HTML 和 CSS 创建图像堆叠错觉？
视觉错觉在网页开发中非常吸引人。在我们的网站中使用视觉错觉可以吸引用户，因为它可以玩弄他们的思维。它欺骗我们的大脑，让我们相信实际上不存在的东西。这些错觉可以使用 CSS 中的各种技术来创建。最常用的错觉之一是图像堆叠错觉，它仅仅是深度的一种错觉。在本文中，我们将讨论仅使用 HTML 和 CSS 创建图像堆叠错觉的步骤。让我们开始吧。
什么是图像堆叠错觉？
图像堆叠错觉是一种视觉错觉，它是通过将多张图像以不同的透明度叠加在一起创建的。当您从一个角度观看它时，所有图像相互混合，并产生三维图像的错觉。
此效果以前是使用 Photoshop 完成的。但是，如今我们可以通过简单地使用 HTML 和 CSS 来创建一个。
需要遵循的步骤
创建一个包含图像的div元素。这将是第一个堆叠的表面。
使用边框和盒阴影属性来设置img元素的样式。
为 div 元素（类="stack1"）分配尺寸。将 div 元素的位置保持为relative，以便即将出现的伪元素（:before 和 :after 元素）的位置相对于 div 元素而不是页面保持相对，因为我们将把这些伪元素的位置保持为绝对。将 div 元素浮动到左侧。添加边距和填充以获得更好的外观。
使用属性“:before”添加堆叠的第一个伪元素。不要向其添加内容。分配其尺寸并赋予其绝对定位。使用 background-color、box-shadow 和 border 属性对其进行样式设置。
将伪元素的 z-index 保持为 -1。给出不同的 top 和 left 值以赋予其不同的位置并创建不同的错觉。您还可以旋转伪元素以观察不同的效果。
使用属性“:after”创建第二个伪元素。对其进行样式设置，使其与第一个伪元素类似。只需更改 top、left 和 transform 值即可创建视觉错觉。这完成了您的第一个堆叠。
类似地，您可以在网页中创建任意数量的堆叠。在这里，我们在页面中创建了 2 个堆叠。
示例
在此示例中，我们创建了一个图像堆叠。对于堆叠，我们将top、left和 transform 值分别设置为-15px、-15px和rotate(-10deg)（对于:before伪元素），而5px、0和rotate(10deg)（对于:after伪元素）。为每个伪元素提供不同的 background-color 以产生更大的影响。
<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://tutorialspoint.com/images/physics-tutorials_icon.svg">
</div>
</body>
</html>
我们在网页设计中可以在哪里使用图像堆叠错觉？
在网页设计中，图像堆叠错觉可用于创建各种令人惊叹的视觉布局。它可用于制作醒目的图像库和引人入胜的产品广告页面。此外，设计师可以使用它来展示他们的作品集。行业和大型企业可以将此效果融入到他们的登陆页面中。
结论
图像堆叠错觉在网页开发、广告和图形设计中很受欢迎。大量用户的关注促使开发人员创建更多此类醒目的视觉效果。此外，我们不再依赖 Photoshop 等应用程序来实现此效果。我们可以仅使用 HTML 和 CSS 轻松创建它。在本文中，我们使用了伪类（:before和:after）来实现所需的结果。我们在本文中看到了 6 种不同的错觉。但是，还有更多可能性，您只需要进行练习并按照此处讨论的相同步骤创建自己的视觉效果。
1K+ 浏览量
