CSS で写真のスタッキング効果を実装するサンプルコード

成果を達成する

ステップ

1. 初期index.html

最初の写真、一番上の写真を作成します。写真の img を含む div を追加するだけです。以上です。残りの効果は CSS を通じて実現されます。 div にクラス stackone があることを確認します。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>写真スタック</title>
  <スタイル>
    * {
      マージン: 0;
      パディング: 0;
    }
    html,
    体 {
      幅: 100%;
      高さ: 100%;
      オーバーフロー: 非表示;
    }
    .stackone {
      --img-width: 480px;
      --img-height: 320px;
      境界線: 6px 実線 #fff;
      フロート: 左;
      高さ:var(--img-height);
      幅: var(--img-width);
      マージン: 50px;
      位置: 相対的;
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      ボックスの影: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    .stackone画像{
      幅: var(--img-width);
    }
  </スタイル>
</head>
<本文>
  <div class="stackone">
    <img src="../../../assets/image/landscape-4378548_960_720.jpg">
  </div>
</本文>
</html>

初期効果は次のとおりです。

2. 最初の擬似要素

ここでネガティブのレイヤーを追加します。私たちが望む効果は、下の画像が上の写真の下に表示されることです。これを実現するには、CSS 疑似クラス before を使用できます。

.stackone::before {
  コンテンツ： "";
  高さ:var(--img-height);
  幅: var(--img-width);
  背景: #eff4de;
  境界線: 6px 実線 #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);
  ボックスの影: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

効果は今や大きく異なる

3. 事前に改善する

これは私たちが望んでいる効果ではありません。どうすれば修正できますか? :before に位置指定を追加し、それを背後に配置するために z-index を設定する必要があります。

.stackone::before {
  コンテンツ： "";
  高さ:var(--img-height);
  幅: var(--img-width);
  背景: #eff4de;
  境界線: 6px 実線 #fff;

  位置: 絶対;
  Zインデックス: -1;
  上: 0px;
  左: -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);
  ボックスの影: 2px 2px 5px rgba(0, 0, 0, 0.3);

  -webkit-transform: 回転(-5度);
  -moz-transform:回転(-5度);
  -o-transform: 回転(-5度);
  -ms-transform:回転(-5度);
  変換: 回転(-5度);
}

この時点では効果は正常であり、初期の兆候が見られる

4. 2番目の疑似要素

.stackone::after {
  コンテンツ： "";
  高さ:var(--img-height);
  幅: var(--img-width);
  背景: 水色;
  境界線: 6px 実線 #fff;
  位置: 絶対;
  Zインデックス: -1;
  上: 5px;
  左: 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);
  ボックスの影: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: 回転(4度);
  -moz-transform:回転(4度);
  -o-transform: 回転(4度);
  -ms-transform:回転(4度);
  変換: 回転(4度);
}

ついに、階層感覚をもって完成です。

元の説明

この記事は、2014 年 12 月 29 日 16:38:48 に CSDN に投稿された私のブログ「写真のスタッキング効果を実現する CSS」から移行されたものです。
ソースブログの参照は「疑似要素を使用してイメージスタックの錯覚を作成する」から翻訳されています。
Githubプロジェクトのソースコード

<<: Baidu百科事典UIの開発動向について議論する

>>: Nginx プロセス管理とリロードの原則の詳細な説明