css實(shí)現(xiàn)圖片堆疊效果的方法介紹-創(chuàng)新互聯(lián)

今天小編給大家分享的是css實(shí)現(xiàn)圖片堆疊效果的方法介紹，很多人都不太了解，今天小編為了讓大家更加了解css實(shí)現(xiàn)圖片堆疊效果，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、察雅網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為察雅等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

css實(shí)現(xiàn)圖片堆疊效果的方法介紹

1、初始index.html

為了建立第一張照片，也就是最上面的那張。我們只需要添加一個(gè)div，里面包含照片的img。就這么多，剩下的效果都是通過(guò)CSS來(lái)實(shí)現(xiàn)的。確保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>

初始的效果如下：

css實(shí)現(xiàn)圖片堆疊效果的方法介紹

2、The First Pseudo Element

現(xiàn)在我們添加一層底片。我們想得到的效果是：底層圖片看上去好像是在頂層照片下面。我們可以用CSS的偽類:before來(lái)實(shí)現(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);
}

3、完善before

給: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);
}

完成圖：

css實(shí)現(xiàn)圖片堆疊效果的方法介紹

關(guān)于css實(shí)現(xiàn)圖片堆疊效果的方法介紹就分享到這里了，當(dāng)然并不止以上和大家分析的辦法，不過(guò)小編可以保證其準(zhǔn)確性是絕對(duì)沒問(wèn)題的。希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

標(biāo)題名稱：css實(shí)現(xiàn)圖片堆疊效果的方法介紹-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://aaarwkj.com/article40/ccddeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站制作、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css實(shí)現(xiàn)圖片堆疊效果的方法介紹-創(chuàng)新互聯(lián)