マウスをホバーすると画像が折りたたまれる効果を実現する CSS

1. 実施のポイント

折り畳みは複数のブロックレベル要素によって実現されます。
画像は背景画像として表示されます。
各ブロックレベル要素に同じ背景画像を設定し、background-position を使用して表示領域を制御します (スプライト画像と同様)。
折りたたみ効果は ransform 属性によって実現されます。
ラップされた div 全体のサイズは、画像の元のサイズです。サイズを変更する場合は、background-size などのプロパティを調整して背景画像のサイズを調整する必要があります。

2. エフェクト表示

画像折り効果表示

3. ソースコード

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

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ホバーフォルダー</title>
  <スタイル>
    html,
    体、
    ウル、
    li {
      マージン: 0;
      パディング: 0
    }

    ul {
      リストスタイル: なし;
      表示: ブロック;
    }

    体 {
      幅: 100%;
      高さ：100vh;
    }

    。容器 {
      幅: 100%;
      高さ: 100%;
      /* 背景色: 水色; */
      ディスプレイ: フレックス;
      コンテンツの中央揃え: 中央;
      アイテムの位置を中央揃えにします。
      変換: スケール(0.5);
    }

    。包む {
      ボックスの影: 0 2px 12px 0 rgba(0, 0, 0, .5);
      幅: 1280ピクセル;
      高さ: 854px;
      フォントサイズ: 0;
      行の高さ: 0;
      位置: 相対的;

    }

    。画像 {
      カーソル: ポインタ;
    }

    .abs-wrap {
      高さ: 100%;
      幅: 100%;
      /* 上: 0;
      左: 0; */
      /* 位置: 絶対; */
      zインデックス: 10;

    }

    .abs-wrap:hover>.abs:nth-child(2) {
      変換: 行列(0.8, -0.2, 0, 1, -1, 0);
    }

    .abs-wrap:hover>.abs:nth-child(3) {
      変換: 行列(0.8, 0.2, 0, 1, -53, -50);
    }

    .abs-wrap:hover>.abs:nth-child(4) {
      変換: 行列(0.8, -0.2, 0, 1, -105, 0);
    }

    .abs-wrap:hover>.abs:nth-child(5) {
      変換: 行列(0.8, 0.2, 0, 1, -157, -50);
    }

    .abs {
      変換スタイル: 3D を保持します。
      変換の原点: 左中央;
      遷移: .4 秒のイーズインアウト;
      幅: 20%;
      高さ: 100%;
      /* 背景色: rgba(0, 0, 0, .5); */
      表示: インラインブロック;
      背景サイズ: 100%;
      背景: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600577868615&di=d2979a54604ecb409e3329527d0220fa&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D29311073%2C358824429%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D854');
    }

    .abs:n番目の子(1) {
      背景位置: 0% 0%;
    }

    .abs:n番目の子(2) {
      背景位置: 25% 0%;
    }

    .abs:n番目の子(3) {
      背景位置: 50% 0%;
    }

    .abs:n番目の子(4) {
      背景位置: 75% 0%;
    }

    .abs:n番目の子(5) {
      背景位置: 100% 0%;
    }
  </スタイル>
</head>

<本文>
  <div class="コンテナ">
    <div class="wrap">
      <ul class="abs-wrap">
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>
        <li class="abs"></li>

      </ul>

    </div>

  </div>

</本文>

</html>

要約する

マウスを画像の上に置いたときに折り畳み効果を実現する CSS の使用方法に関するこの記事はこれで終わりです。マウスを画像の上に置いたときに画像を折り畳むことに関するより関連性の高い CSS コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MyBatis 動的 SQL の包括的な説明

>>: Redis イメージの Docker インストールと設定手順