溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是css實現圖片堆疊效果的方法介紹，很多人都不太了解，今天小編為了讓大家更加了解css實現圖片堆疊效果，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。
1、初始index.html
為了建立第一張照片，也就是最上面的那張。我們只需要添加一個div，里面包含照片的img。就這么多，剩下的效果都是通過CSS來實現的。確保div的class為stackone。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Photo Stack</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.stackone {
--img-width: 480px;
--img-height: 320px;
border: 6px solid #fff;
float: left;
height:var(--img-height);
width: var(--img-width);
margin: 50px;
position: relative;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.stackone img {
width: var(--img-width);
}
</style>
</head>
<body>
<div>
<img src="../../../assets/image/landscape-4378548_960_720.jpg" />
</div>
</body>
</html>初始的效果如下：
2、The First Pseudo Element
現在我們添加一層底片。我們想得到的效果是：底層圖片看上去好像是在頂層照片下面。我們可以用CSS的偽類:before來實現。
.stackone::before {
content: "";
height:var(--img-height);
width: var(--img-width);
background: #eff4de;
border: 6px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}3、完善before
給:before加入一些定位，然后設置z-index將它放在后面。
.stackone::before {
content: "";
height:var(--img-height);
width: var(--img-width);
background: #eff4de;
border: 6px solid #fff;
position: absolute;
z-index: -1;
top: 0px;
left: -10px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}4、The Second Pseudo Element
.stackone::after {
content: "";
height:var(--img-height);
width: var(--img-width);
background: lightblue;
border: 6px solid #fff;
position: absolute;
z-index: -1;
top: 5px;
left: 0px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}完成圖：
關于css實現圖片堆疊效果的方法介紹就分享到這里了，當然并不止以上和大家分析的辦法，不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
