滚动的相册墙

首先是需要给每个图片一个容器

<div class="box">
    <div class="column">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="bofangqi">
        <audio src="./haizeiwang.mp3" loop="loop" autoplay="autoplay" controls="controls">            
        </audio>
    </div>
    <div id="text1">汤圆的家之海贼王</div>
</div>

然后就是通过css样式来完成最后的效果

<style>
    *{
      margin:0;
      padding:0;
    }
    .box{
      width:100%;
      height:100vh;
      animation: backgroundKey 15s linear infinite;
      
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    @keyframes backgroundKey{
      0%{
        background-image: url('./images/xiangjishi.jpg');
      }
      9%{
        background-image: url('./images/wusuopu.jpeg');
      }
      18%{
        background-image: url('./images/suolong.jpg');
      }
      27%{
        background-image: url('./images/sabo.jpeg');
      }
      36%{
        background-image: url('./images/qiaoba.jpg');
      }
      45%{
        background-image: url('./images/namei.jpg');
      }
      54%{
        background-image: url('./images/luobin.jpg');
      }
      63%{
        background-image: url('./images/lufei.jpg');
      }
      72%{
        background-image: url('./images/long.jpg');
      }
      81%{
        background-image: url('./images/fulanqi.jpg');
      }
      90%{
        background-image: url('./images/buluke.jpg');
      }
      100%{
        background-image: url('./images/aisi.jpeg');
      }
    }
    .column{
      width:400px;
      height:300px;
      background-image:url('./images/caomao.jpg');
      background-size: cover;
      background-position: center center;
      position: relative;
      top:100px;
      margin:0 auto;
      transform-style: preserve-3d;
      animation: rotation 15s linear infinite;
    }
    @keyframes rotation{
      0%{
        transform:rotateX(10deg) rotateY(0deg);
      }
      50%{
        transform:rotateX(-20deg) rotateY(180deg);
      }
      100%{
        transform:rotateX(10deg) rotateY(360deg);
      }
    }
    .column div{
      width:220px;
      height:300px;
      position: absolute;
      top:100px;
      left:75px;
      background-size: cover;
      background-position: center center;
      border-radius: 25px;
    }
    .column div:nth-child(1){
      background-image: url('./images/aisi.jpeg');
      transform:rotateY(30deg) translateZ(500px);
    }
    .column div:nth-child(2){
      background-image: url('./images/buluke.jpg');
      transform:rotateY(60deg) translateZ(500px);
    }
    .column div:nth-child(3){
      background-image: url('./images/fulanqi.jpg');
      transform:rotateY(90deg) translateZ(500px);
    }
    .column div:nth-child(4){
      background-image: url('./images/long.jpg');
      transform:rotateY(120deg) translateZ(500px);
    }
    .column div:nth-child(5){
      background-image: url('./images/lufei.jpg');
      transform:rotateY(150deg) translateZ(500px);
    }
    .column div:nth-child(6){
      background-image: url('./images/luobin.jpg');
      transform:rotateY(180deg) translateZ(500px);
    }
    .column div:nth-child(7){
      background-image: url('./images/namei.jpg');
      transform:rotateY(210deg) translateZ(500px);
    }
    .column div:nth-child(8){
      background-image: url('./images/qiaoba.jpg');
      transform:rotateY(240deg) translateZ(500px);
    }
    .column div:nth-child(9){
      background-image: url('./images/sabo.jpeg');
      transform:rotateY(270deg) translateZ(500px);
    }
    .column div:nth-child(10){
      background-image: url('./images/suolong.jpg');
      transform:rotateY(300deg) translateZ(500px);
    }
    .column div:nth-child(11){
      background-image: url('./images/wusuopu.jpeg');
      transform:rotateY(330deg) translateZ(500px);
    }
    .column div:nth-child(12){
      background-image: url('./images/xiangjishi.jpg');
      transform:rotateY(360deg) translateZ(500px);
    }
    #bofangqi{
      width:300px;
      margin:410px auto 0;

    }
    #text1{
      text-align: center;
      margin:15px;
      animation: colors 7s linear infinite;
    }
    @keyframes colors{
      0%{
        color:red;
      }
      50%{
        color:green;
      }
      100%{
        color:blue;
      }
    }
  </style>

可以通过抖音扫码、哔哩哔哩搜索  web-lyh 观看教学视频

源码地址：

https://pan.baidu.com/s/1zxIWu4V1Ih6z1nuzB5WRHA?pwd=1234​​​​​​​