代码音画 多层图片推出

武朝歌

晴岚 发表于 2024-10-24 09:48
貌似音画制作进步了哈，蛮好看，蛮好听的。

那是，好好学习，天天向上。下午好。谢谢您的鼓励和支持！

武朝歌

秋思梦景 发表于 2024-10-24 09:49
问候老师好！精美代码音画，精心制作分享！为您点赞！向您学习！

下午好。谢谢您的鼓励和支持！

武朝歌

活在诗里 发表于 2024-10-24 13:38
欣赏老友精美音画佳作！点赞！

下午好。谢谢您的鼓励和支持！

武朝歌

娟子 发表于 2024-10-24 14:02
欣赏老师音画佳作！新颖漂亮，非常好！向您学习，点赞！

下午好。谢谢您的鼓励和支持！源码（抄来的)太复杂我改编了一下，原码附后供您参考：

<style>
#papa{
        position: relative;
        width: 960px;
        height: 600px;
        margin-left:-20px;
        margin-top:0px;
        border: 0px solid rgba(36, 201, 219,.95);
        border-radius: 0px;
        background:#000 url('https://pic.imgdb.cn/item/66135afc68eb9357135ffd24.jpg')no-repeat

center/cover;
        overflow: hidden;

}
#papa > video {
        position: absolute;
        width: 100%;
        height:100%;
        object-fit: cover;mix-blend-mode: screen;
        -webkit-mask: linear-gra**nt(to right top, red 1%, transparent 100%, transparent);
        transform: rotateX(360deg);pointer-events: none;
}
.img-container {
  position: relative;
  height: 600px;
  width: 686px;left:340px;top: -3%;
  perspective: 500px;
  transform-style: preserve-3d;
}
.box {      
  width: 620px;
  height: 400px;
  border-radius: 0px;
  overflow: hidden;
  border: 3px solid #ccc;
  position: absolute;
  top: 50%;
  transition: 800ms ease-in-out;
}

.box img {
  width: 100%;
  height: 100%;
}

.box:first-of-type {
  z-index: 1;
  opacity: 0;
  left: 15%;
  transform: translate(-100%, -100%) rotateY(50deg);
}

.box:nth-of-type(2) {
  opacity: 1;
  left: 20%;
  transform: translate(-50%, -50%) rotateY(-10deg);
  z-index: 1;
}

.box:nth-of-type(3) {
  left: 25%;
  opacity: 0.90;
  color: #eee;
  z-index: 10;
  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-40px);
}
.box:nth-of-type(4) {
  z-index: 8;
  opacity: 0.80;
  left:30%;
  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-80px);
}

.box:nth-of-type(5) {
  z-index: 7;
  opacity: 0.70;
  left: 35%;
  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-120px);
}

.box:nth-of-type(6) {
  z-index: 6;
  opacity: 0.6;
  left: 40%;
  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-160px);
}

.box:nth-of-type(7) {
  z-index: 5;
  opacity: 0.5;
  left: 45%;
  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-200px);
}
.box:nth-of-type(8) {
  z-index: 4;
  opacity: 0.4;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-240px);
}
.box:nth-of-type(9) {
  z-index: 3;
  opacity: 0.3;
  left: 55%;
  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-280px);
}
.box:nth-of-type(10) {
  z-index: 2;
  opacity: 0;
  left: 60%;
  transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-320px);
}
</style>

<div id="papa" >
<video src="https://img.tukuppt.com/video_show/2629112/00/02/06/5b509c34df30f.mp4" autoplay loop

muted></video>
<div class="img-container" >
      <div class="box">
        <img src="https://cccimg.com/view.php/9afc2e9cc114c85e1c37ddae0e5d687f.gif">
      </div>
      <div class="box">
         <img src="https://cccimg.com/view.php/1bf44a9a7a87dbbd26611dc14f3ad8f4.gif ">
      </div>
      <div class="box">
        <img src="https://pic.imgdb.cn/item/6694aa33d9c307b7e9ec0326.gif   ">
      </div>
      <div class="box">
         <img src="hhttps://pic.imgdb.cn/item/6695001ed9c307b7e95ea593.gif">
      </div>
      <div class="box">
         <img src="https://cccimg.com/view.php/6e883699181276c2635ed71ecb38e296.gif">
      </div>
      <div class="box">
        <img src="https://cccimg.com/view.php/6fa6b457e508b0afb82865f0e6c01caa.gif  ">
      </div>
      <div class="box">
         <img src="https://cccimg.com/view.php/f81717977edc372b4d64429231e1b9af.gif ">
      </div>
      <div class="box">
         <img src="https://cccimg.com/view.php/53d3585373dae9eaf058ccb4c323fc03.gif .jpg">
      </div>
      <div class="box">
         <img src="https://cccimg.com/view.php/5d1b140491d649e64860f74cbd6cd049.gif ">
       </div>
</div>
</div>

<script>
let imgContainer = document.querySelector(".img-container");
setInterval(() => {
        let last = imgContainer.firstElementChild;
        last.remove();
        imgContainer.appendChild(last);
      }, 2500);
</script><video autoplay="" controls="" height="0"

src="https://music.163.com/song/media/outer/url?id=5235635.mp3 " width="0">
<audio src="

如果无法播放，请点击此处在新窗口打开

" autoplay loop><

真真

美好快乐，谢谢老师。

武朝歌

静悟 发表于 2024-10-24 14:54
老师做的多图片推出做得漂亮。点赞！

下午好。谢谢您的鼓励和支持！
源码见14#供您参考。

武朝歌

真真 发表于 2024-10-24 15:26
美好快乐，谢谢老师。

下午好。谢谢您的鼓励和支持！

潇湘翁

欣赏老师佳作，漂亮，赞！

武朝歌

潇湘翁 发表于 2024-10-24 15:50
欣赏老师佳作，漂亮，赞！

下午好。谢谢您的鼓励和支持！

红红的太阳

赞赏武朝歌老师精美代码音画。真棒！