ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像のスタッキング効果を実現する方法

CSSで画像のスタッキング効果を実現する方法

王林転載: 2020-03-12 17:57:053872ブラウズ

1. 初期インデックス.html

最初の写真 (一番上の写真) を作成します。写真の画像を含む div を追加するだけです。これですべてです。残りの効果は CSS を通じて実現されます。 div のクラスが 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" / alt="CSSで画像のスタッキング効果を実現する方法" > 
  </div>  
 </body>
</html>

最初の効果は次のとおりです:

CSSで画像のスタッキング効果を実現する方法

(推奨チュートリアル: CSS 入門チュートリアル )

2. 最初の疑似要素

次に、ネガのレイヤーを追加します。私たちが望む効果は、下の画像が上の写真の下にあるように見えることです。これを実現するには、以前に CSS 疑似クラスを使用できます。

.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を改善

to: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. 2 番目の疑似要素

.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で画像のスタッキング効果を実現する方法

推奨される関連ビデオチュートリアル: cssビデオチュートリアル

以上がCSSで画像のスタッキング効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はjb51.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：CSSでnマスレイアウトを実装する方法次の記事：CSSでnマスレイアウトを実装する方法

続きを見る