如何使用HTML和CSS創建影像堆疊幻覺？
在 Web 開發方面，視覺錯覺非常令人著迷。在我們的網站中使用視覺錯覺可以吸引用戶，因為它可以玩弄他們的思想。它欺騙我們的大腦，讓我們相信一些實際上不存在的東西。這些錯覺可以使用 CSS 中的各種技術來創建。最常用的錯覺之一是影像堆疊錯覺，它只是一種深度錯覺。在本文中，我們將討論僅使用 HTML 和 CSS 建立圖像堆疊錯覺所涉及的步驟。讓我們開始吧。
什麼是影像堆疊錯覺？
影像堆疊錯覺是一種視覺錯覺，是透過將多個具有不同透明度的影像堆疊在一起而產生的。當您從某個角度觀看時，所有圖像都會相互混合併產生三維圖像的錯覺。
此效果之前是使用 Photoshop 完成的。然而，現在我們可以簡單地使用 HTML 和 CSS 來建立一個。
應遵循的步驟
建立一個 div 元素，其中包含圖像。這將是第一個堆疊的表面。
使用邊框和框陰影屬性來設定 img 元素的樣式。
為 div 元素指定尺寸（class=“stack1”）。將div 元素的位置保持為relative，以便即將到來的偽元素（:before 和:after 元素）的position 將保持相對於div 元素，而不是相對於因為我們將把這些偽元素的位置保持為絕對位置。將 div 元素向左浮動。添加邊距和填充以獲得更好的外觀。
使用屬性「:before」新增堆疊的第一個偽元素。不要在其中添加內容。指定其尺寸並賦予其絕對定位。使用背景顏色、框陰影和邊框屬性對其進行樣式設定。
將偽元素的 z 索引保持為 -1。賦予 top 和 left 不同的值，以賦予其不同的位置並產生不同的幻覺。您也可以旋轉偽元素來觀察不同的效果。
使用屬性「:after」建立第二個偽元素。它的樣式與第一個偽元素類似。只需更改頂部、左側和變換值即可創建視覺錯覺。這樣就完成了您的第一個堆疊。
同樣，您可以在網頁中建立盡可能多的堆疊。在這裡，我們在一個頁面中創建了 2 個堆疊。
範例
在此範例中，我們建立了一堆映像。對於堆疊，我們將 top、left 和變換值保留為 -15px、-15px 和 rotate(-10deg) 。 >:before 偽元素，而 5px, 0 和 rotate(10deg) 則為 :after 偽元素。為每個偽元素賦予不同的背景顏色以獲得更大的效果。
<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 id="Image-Stack-Illusion"> Image Stack Illusion </h1>
<div class="stack1">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" class="lazy" alt="如何使用HTML和CSS創建影像堆疊幻覺？" >
</div>
</body>
</html>
我們可以在網頁設計中的哪些地方使用圖像堆疊錯覺？
在網頁設計中，圖像堆疊幻覺可用於創建各種令人興奮的視覺佈局。它可用於製作引人注目的圖像畫廊和引人入勝的產品廣告頁面。此外，設計師也可以用它來展示他們的作品集。產業和大企業可以結合這種效果來創建他們的登陸頁面。
結論
圖像堆疊錯覺廣泛用於網頁開發、廣告和圖形設計。許多用戶的吸引力說服了開發者創造更多如此引人注目的視覺效果。此外，我們不再依賴 Photoshop 應用程式來實現這種效果。我們只需使用 HTML 和 CSS 即可輕鬆建立它。在本文中，我們使用偽類別（:before 和 :after）來實現所需的結果。我們在本文中看到了 6 種不同的錯覺。但是，還有更多可能，您所需要做的就是按照此處討論的相同步驟進行練習並創建自己的視覺效果。
以上是如何使用HTML和CSS創建影像堆疊幻覺？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
React在HTML中的作用：增強用戶體驗
Apr 09, 2025 am 12:11 AM
React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
