資料結構
網路
關係型資料庫管理系統
作業系統
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.tw/images/physics-tutorials_icon.svg">
</div>
</body>
</html>
我們在網頁設計中可以在哪裡使用影像堆疊錯覺？
在網頁設計中，影像堆疊錯覺可用於建立各種令人驚歎的視覺佈局。它可用於製作醒目的影像庫和引人入勝的產品廣告頁面。此外，設計師可以使用它來展示他們的作品集。行業和大型企業可以將此效果融入到他們的登陸頁面中。
結論
影像堆疊錯覺在網頁開發、廣告和圖形設計中很受歡迎。大量使用者的關注促使開發人員建立更多此類醒目的視覺效果。此外，我們不再依賴 Photoshop 等應用程式來實現此效果。我們可以僅使用 HTML 和 CSS 輕鬆建立它。在本文中，我們使用了偽類（:before和:after）來實現所需的結果。我們在本文中看到了 6 種不同的錯覺。但是，還有更多可能性，您只需要進行練習並按照此處討論的相同步驟建立自己的視覺效果。
1K+ 瀏覽量
