亚伦影音工作室 发表于 2025-7-22 15:40

用按钮控制动画

本帖最后由 亚伦影音工作室 于 2025-7-24 15:32 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 680px); width: 1286px; height: 680px; background:url(https://pic1.imgdb.cn/item/687f3f0858cb8da5c8cb1c04.webp)no-repeat center/cover;
overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; z-index: 1; }
    .lzpa {
      position: absolute;
      top:20px; left:500px;
      width: 600px;
      height: 600px;
      cursor: pointer;
      animation: rotating 6s infinite linear;
      }
    @keyframes rotating { to { transform: rotate(360deg); } }
    li-zi {
      position: absolute;
      left: calc( 250px + 250px * cos(var(--deg)) );
      top: calc( 250px + 250px * sin(var(--deg)) );
      width: 100px;
      height: 100px;cursor: pointer;
      border-radius: 50px;
      }

   li-zi:hover{transform:scale(3);top:250px; left:-350px;}
.lzpa:hover{transform: rotate(360deg)}
    li-zi:nth-of-type(1) { --deg: 0deg;background:url(https://pic1.imgdb.cn/item/67715fc5d0e0a243d4ec3384.png) no-repeat center / cover }
    li-zi:nth-of-type(2) { --deg: 45deg;background:url(https://pic1.imgdb.cn/item/686cbd4658cb8da5c8963cfc.webp) no-repeat center / cover }
    li-zi:nth-of-type(3) { --deg: 90deg;background:url(https://pic1.imgdb.cn/item/686262c458cb8da5c87f7faf.jpg) no-repeat center / cover }
    li-zi:nth-of-type(4) { --deg: 135deg;background:url(https://pic1.imgdb.cn/item/685cdd5258cb8da5c8724514.jpg) no-repeat center / cover }
    li-zi:nth-of-type(5) { --deg: 180deg;background:url(https://pic1.imgdb.cn/item/68537fb258cb8da5c85a91ce.jpg) no-repeat center / cover }
    li-zi:nth-of-type(6) { --deg: 225deg;background:url(https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg) no-repeat center / cover }
    li-zi:nth-of-type(7) { --deg: 270deg;background:url(https://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.jpg) no-repeat center / cover }
    li-zi:nth-of-type(8) { --deg: 315deg;background:url(https://pic1.imgdb.cn/item/6818838658cb8da5c8dd8333.jpg) no-repeat center / cover }
#btn{   top:620px; left:20px;cursor: pointer;width:50px;height: 50px;position: absolute;z-index: 20;animation-duration: 0.5s; }
#play {background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:100%;height: 100%;position: absolute; }
#pause{background: url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover;width:100%;height: 100%;position: absolute; display: none;}

</style>
<div id="papa">
<div class="lzpa">
    <li-zi ></li-zi>
    <li-zi ></li-zi>
    <li-zi ></li-zi>
    <li-zi ></li-zi>
    <li-zi ></li-zi>
    <li-zi ></li-zi>
    <li-zi ></li-zi>
    <li-zi ></li-zi>
</div>
<div id="btn">
<p id="play"> </p>
<p id="pause"></p>
</div>
</div>
<script>
const lzpa= document.querySelector('.lzpa');
let fs= true;
btn.onclick = () => {
            if (fs) {lzpa.style.animationPlayState = 'paused' ;
play.style.display = 'none';pause.style.display = 'block';            
   } else {lzpa.style.animationPlayState = '' ;
play.style.display = 'block';pause.style.display = 'none';
            }
            fs = !fs;
      };
</script>

亚伦影音工作室 发表于 2025-7-22 17:01

本帖最后由 亚伦影音工作室 于 2025-7-22 17:11 编辑 <br /><br /><style>
#papab { margin: 10px -300px; width: 1186px;height: 620px;background:#008888; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative;}
.inmg{width:100%; height: 550px; position:absolute; TOP:22%;LEFT: 0%;}
.start{color: #000;position: absolute; top:74%; left: 22%;}
.end{color: #000;position: absolute;top:74%; left: 33%;}
#bnt{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 27%; top: 72%;position: absolute;z-index: 20;}
</style>
<div id="papab">
<div>
<marqueeid="m" scrollamount="2" scrolldelay="30"height=620>
<img alt="" src="https://pic1.imgdb.cn/item/684ec44658cb8da5c84d6baa.png" title="" style="width: 1186px;height: 620px;" />
</marquee>
</div>

<marquee height="550"class="inmg" scrollamount="6" scrolldelay="30" id="m1"><imgsrc="https://pic.imgdb.cn/item/65925523c458853aef32bb01.png" title="" width="360" /></marquee>

<marquee height="550" class="inmg" scrollamount="5" scrolldelay="30" id="m2"><imgsrc="https://pic.imgdb.cn/item/65925524c458853aef32bbd2.png" title="" width="360" /></marquee>

<marquee height="550" class="inmg" scrollamount="4" scrolldelay="30"id="m3"><imgsrc="https://pic.imgdb.cn/item/65925524c458853aef32bd2f.png" title="" width="360" /></marquee>

<marquee height="550" class="inmg" scrollamount="3" scrolldelay="30" id="m4"><imgsrc="https://pic.imgdb.cn/item/6592554dc458853aef3355bc.png" title="" width="360" /></marquee>

<marquee height="550" class="inmg" scrollamount="2" scrolldelay="30"id="m5" ><imgsrc="https://pic.imgdb.cn/item/65925575c458853aef33e836.png" title="" width="360" /></marquee>

<marquee height="550" class="inmg"scrollamount="8" scrolldelay="30" id="m6"><imgsrc="https://pic.imgdb.cn/item/65925587c458853aef342930.png" title="" width="360" /></marquee>

<span class="start">00:00</span><p id="bnt"></p><span class="end">00:00</span>


</div>
<audio id="aud" src="https://www.joy127.com/url/130917.mp3" autoplay loop ></audio>


<script>
      var music = document.getElementById('aud');
      var m= document.getElementById('m');
var m1 = document.getElementById('m1');var m2 = document.getElementById('m2');var m3 = document.getElementById('m3');var m4 = document.getElementById('m4');var m5= document.getElementById('m5');var m6= document.getElementById('m6');
var bnt = document.getElementById('bnt');
      bnt.onclick = function() {
            if (aud.paused) {
                aud.play();
               m.start();m1.start();m2.start();m3.start();m4.start();m5.start();m6.start();
                bnt.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
               } else {
               
                aud.pause();m.stop();m1.stop();m2.stop();m3.stop();m4.stop();m5.stop();m6.stop();
                bnt.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
}
   };
const start = document.querySelector('.start')
   const end= document.querySelector('.end')
function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
   
}, 1000)

</script>

樵歌 发表于 2025-7-22 21:06

两播放器都做得匠心独运，美不胜收！{:4_178:}

杨帆 发表于 2025-7-22 21:06

漂亮！谢谢亚伦老师再创新品{:4_191:}

樵歌 发表于 2025-7-22 21:06

问好，祝创作愉快！

红影 发表于 2025-7-22 22:20

那个圆环转动效果，鼠标触碰能暂停并碰到的小图会变大，只是大小之间会自动变化。
沙发不同速度行进的人物很漂亮。

红影 发表于 2025-7-22 22:21

欣赏亚伦老师带来的精彩效果{:4_187:}
页: [1]
查看完整版本: 用按钮控制动画