亚伦影音工作室 发表于 2024-10-3 06:54

请教马老控制这个动画

本帖最后由 亚伦影音工作室 于 2024-10-4 09:01 编辑 <br /><br /><style>
#papa{
        position: relative;
        width: 1164px;
        height: 640px;
      margin-left:-300px;
        margin-top:10px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url(https://)no-repeat center/cover;
        overflow: hidden;
}
.img-container {
position: relative;
height: 700px;
width: 800px;left:350px;
perspective: 800px;
transform-style: preserve-3d;
}
.box {      
width: 620px;
height: 400px;
border-radius: 0px;
overflow: hidden;
border: 2px solid #ccc;
position: absolute;
top: 50%;
transition: 800ms ease-in-out;
}

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

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

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

.box:nth-of-type(3) {
left: 25%;
opacity: 0.75;
color: #eee;
z-index: 10;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-50px);
}

.box:nth-of-type(4) {
z-index: 5;
opacity: 0.5;
left:30%;
transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-100px);
}

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

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

#mplayer {position: absolute;
      top:70%; left:40px;z-index: 21;
      width: 220px;
      height: 220px;
      cursor: pointer;transition: 0.5s all ease;
}
.pink {transition: 0.1s all ease;background: url('https://pic.imgdb.cn/item/65f0d8299f345e8d03ff0b31.gif')no-repeat center/cover;}
.purple {transition: 0.1s all ease;background: url('https://pic.imgdb.cn/item/65f0d8669f345e8d03ff5c34.png')no-repeat center/cover;}

</style>
<div id="papa" >
<div class="img-container" >
      <div class="box">
      <img src="https://pic.imgdb.cn/item/66fb8410f21886ccc0a62100.webp" alt="">
      </div>
      <div class="box">
         <img src="https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg" alt="">
      </div>
      <div class="box">
      <img src="https://pic.imgdb.cn/item/6673e409d9c307b7e9a64805.webp" alt="">
      </div>
      <div class="box">
         <img src="https://pic.imgdb.cn/item/666909c4d9c307b7e9e71bad.jpg" alt="">
      </div>
      <div class="box">
         <img src="https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg" alt="">
      </div>
      <div class="box">
      <img src="https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg" alt="">
      </div>
    </div>   
<div id="mplayer" class="pink" > </div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2631839994.mp3" autoplay="" loop="loop"></audio>
</div>

<script>
let imgContainer = document.querySelector(".img-container");
setInterval(() => {
   if(!aud.paused){
      let last = imgContainer.firstElementChild;
      last.remove();
      imgContainer.appendChild(last);}
      }, 2500);
</script>
<script>
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) :(aud.pause(),mplayer.classList.add('purple')));
</script>

愤怒的葡萄 发表于 2024-10-3 08:11

来观摩了。

起个网名好难 发表于 2024-10-3 08:25

setInterval(() => {
   if(!aud.paused){
      let last = imgContainer.firstElementChild;
      last.remove();
      imgContainer.appendChild(last);}
      }, 2500);

加个条件就行了。

红影 发表于 2024-10-3 08:56

我不太懂，我只是来欣赏帖子的，这个制作好美啊{:4_199:}

亚伦影音工作室 发表于 2024-10-3 09:04

起个网名好难 发表于 2024-10-3 08:25
加个条件就行了。

对js加音频控制我很少了解，我试试！谢谢黄昏老师！
页: [1]
查看完整版本: 请教马老控制这个动画