小辣椒 发表于 2024-6-13 22:00

动感音乐欣赏


<style>
#outBox { margin: 130px 0 0 calc(50% - 801px); width: 1440px; height: 797px; background: url('https://wj.zp68.com/lxx/yunhua/2022/05/28/0.gif') no-repeat center/cover; border: 1px solid gray; overflow: hidden; z-index: 1; position: relative; }
#innerBox { position: absolute; right: 30px;top: calc(50% - 150px); width: 250px; height: 250px; background: inherit; border-radius: 50%; box-shadow: inset 0 0 100px rgba(0,0,128,.5), 0 0 36px rgba(0,0,128,.5); cursor: pointer; transition: 1s; }
#innerBox:hover { height: 350px; }

#dt2{ position: absolute; width:295px; height: 146px; top: 651px; left: 0px; }

</style>

<div id="outBox">

<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2022/05/28/0.png" alt="" />

    <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/05/28/01.mp3" autoplay loop></audio>
    <div id="innerBox" title="播放"></div>
</div>
<script>
(function() {
    let ani, idx = 0;
    const pics = new Array(10).fill(0).map((item, key) => 'https://wj.zp68.com/lxx/yunhua/2022/05/28/0' + (key + 1) + '.gif');
    const showPic = () => {
      innerBox.style.backgroundImage = `url(${pics})`;
      var outwidth = outBox.offsetWidth, outheight = outBox.offsetHeight;
      var inwidth = innerBox.offsetWidth, inheight = innerBox.offsetHeight;
      var cx = (outwidth - inwidth - 150), cy = (outheight - inheight) / 2;

      var fly = [
            {right: `-${inwidth}px`, top: `${cy}px`},
            {right: `${cx}px`, top: `${cy}px`, offset: 0.25},
            {right: `${cx}px`, top: `${cy - 30}px`},
            {right: `${cx}px`, top: `${cy + 30}px`},
            {right: `${cx}px`, top: `${cy - 30}px`},
            {right: `${cx}px`, top: `${cy}px`},
            {right: `${cx}px`, top: `${cy}px`, offset: 0.95},
            {right: `${outwidth}px`, top: `${cy}px`}
      ];
      ani = innerBox.animate(fly, 10000);
      ani.onfinish = () => {
            idx = (idx + 1) % (pics.length);
            showPic();
      };
    };
    const mState = () => {
      aud.paused ? ani.pause() : ani.play();
      innerBox.title = ['暂停','播放'][+aud.paused];
    };
    aud.onplaying = aud.onpause = () => mState();
    innerBox.onmouseover = () => {if(!aud.paused) ani.pause();};
    innerBox.onmouseout = () => {if(!aud.paused) ani.play();};
    innerBox.onclick = () => aud.paused ? aud.play() : aud.pause();
    showPic();
})();
</script>
<br><br><br><br><br>

小辣椒 发表于 2024-6-13 22:01

动感图片按钮

liumang 发表于 2024-6-13 23:16

漂亮的，制作真美，播放器出来这么多，我点击每个都有效{:5_150:}

liumang 发表于 2024-6-13 23:18

动感音乐也是特别的给力{:5_152:}{:5_152:}{:5_152:}
页: [1]
查看完整版本: 动感音乐欣赏