溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS如何實現(xiàn)照片堆疊效果

發(fā)布時間：2022-02-28 15:16:14 來源：億速云 閱讀：245 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了CSS如何實現(xiàn)照片堆疊效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　步驟

　　1.初始index.html

　　為了建立第一張照片，也就是最上面的那張。我們只需要添加一個div，里面包含照片的img。就這么多，剩下的效果都是通過CSS來實現(xiàn)的。確保div的class為stackone。

　　<!DOCTYPE html>

　　<html lang="en">

　　<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 class="stackone">

　　<img src="../../../assets/image/landscape-4378548_960_720.jpg">

　　</div>

　　</body>

　　</html>

　　初始的效果如下：

　　2.The First Pseudo Element

　　現(xiàn)在我們添加一層底片。我們想得到的效果是：底層圖片看上去好像是在頂層照片下面。我們可以用CSS的偽類:before來實現(xiàn)。

　　.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);

　　}

　　此時效果相差甚遠(yuǎn)

　　3.完善before

　　這不是我們想要的效果。如何修復(fù)？我們需要給:before加入一些定位，然后設(shè)置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);

　　}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS如何實現(xiàn)照片堆疊效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手