CSS3 视差滚动相册

一个基于 CSS3 的视差滚动相册，采用网格布局（主要）与弹性布局。

视差滚动相册

源代码如下：

DOCTYPE html>
html lang="en">

head>
  meta charset="UTF-8">
  meta name="viewport" content="width=device-width, initial-scale=1.0">
  title> 旋转视差相册 title>
  style>
    * {
      margin: 0;
      padding: 0;
    }

    .content {
      width: 300px;
      height: 300px;
      margin: 0 auto;
      margin-top: 100px;
      display: grid;
      
      

      
      grid-template:
        "A A B"
        "C D B"
        "C E E";
      grid-gap: 10px;
      padding: 10px;
      border: 5px solid transparent;
      border-image: linear-gradient(45deg, #df270ae0, #dc8d30, #deeb44, #01eb3e, #138fe9, #7127ee) 1;
      animation: rotation 15s infinite linear;
    }

    .item {
      overflow: hidden;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .item img {
      animation: rotation1 15s infinite linear;
      width: 300%;
      height: 300%;
      object-fit: cover;
    }

    .item:nth-child(1) {
      grid-area: A;
    }

    .item:nth-child(2) {
      grid-area: B;
    }

    .item:nth-child(3) {
      grid-area: C;
    }

    .item:nth-child(4) {
      grid-area: D;
    }

    .item:nth-child(5) {
      grid-area: E;
    }



    @keyframes rotation {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes rotation1 {
      to {
        transform: rotate(-360deg);
      }
    }
  style>
head>

body>
  div class="content">
    div class="item">
      img src="./static/pic1.jpg">
    div>
    div class="item">
      img src="./static/pic2.jpg">
    div>
    div class="item">
      img src="./static/pic3.jpg">
    div>
    div class="item">
      img src="./static/pic4.jpg">
    div>
    div class="item">
      img src="./static/pic5.jpg">
    div>
  div>
body>

html>