CSS3技術(shù)可以實(shí)現(xiàn)許多炫酷的效果，其中之一就是散亂的堆積。使用CSS3，你可以實(shí)現(xiàn)一個看似無序的堆疊效果，給網(wǎng)頁增添一份趣味性。

/* CSS3代碼 */
.container {
position: relative;
width: 600px;
height: 400px;
}
.card {
position: absolute;
width: 150px;
height: 200px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.1);
z-index: 1;
}
.card:nth-child(1) {
top: 50px;
left: 50px;
}
.card:nth-child(2) {
top: 100px;
left: 100px;
}
.card:nth-child(3) {
top: 150px;
left: 150px;
}
.card:nth-child(4) {
top: 200px;
left: 200px;
}

上面的代碼是實(shí)現(xiàn)散亂堆疊效果的核心代碼。首先，我們?yōu)榘ㄆ娜萜髟O(shè)置了相對定位，以便后面的絕對定位可以參照它來定位。

.container {
position: relative;
width: 600px;
height: 400px;
}

然后，我們?yōu)榭ㄆ砑恿私^對定位，具體位置根據(jù)nth-child()偽類來設(shè)置。

.card {
position: absolute;
width: 150px;
height: 200px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out;
}
.card:nth-child(1) {
top: 50px;
left: 50px;
}
.card:nth-child(2) {
top: 100px;
left: 100px;
}
.card:nth-child(3) {
top: 150px;
left: 150px;
}
.card:nth-child(4) {
top: 200px;
left: 200px;
}

我們?yōu)槊總€卡片添加了過渡效果，當(dāng)鼠標(biāo)懸停在卡片上時，卡片會放大并出現(xiàn)在其他卡片上方。

.card:hover {
transform: scale(1.1);
z-index: 1;
}

最終效果會讓用戶有一種卡片堆成的感覺。如果你有興趣，可以嘗試自己調(diào)整容器和卡片的大小、位置以及背景顏色等參數(shù)，讓效果更適合你的網(wǎng)頁風(fēng)格。