首页 › 播放器 › 欢度国庆

小辣椒 发表于 2024-10-1 01:19

欢度国庆

<style>
#tz {
    margin: 120px 0 10px calc(0% - 0px);
    width: 1000px;
    height: 783px;
    background: radial-gradient(transparent 75%, transparent, #000);
    box-shadow: 2px 2px 6px #333;
    display: grid;
    place-items: center;
    z-index: 1;
    position: relative;
    --opacity: .8;
    overflow: hidden;
    border-radius: 32px;
    pointer-event: none;
}

#player {
    position: absolute;
    width: 150px;
    height: 150px;
    bottom: 20%;
    cursor: pointer;
    transition: .6s;
    opacity: .8;
    animation: rot 8s linear infinite var(--state);
    pointer-event: auto;
    z-index: 99;
}

#msvg {
    position: absolute;
    border: none;
    transition: 1.2s;
}

@keyframes rot {
    to {
      transform: rotate(1turn);
    }
}

#dt1 {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#dt2 {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 120px;
    left: 100px;
}

#dt3 {
    position: absolute;
    width: 397px;
    height: 125px;
    bottom: 3%;
    right: 17%;
}
</style>
<div id="tz">
<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2022/05/28/01.gif" alt="" class="dynpic" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" class="dynpic" />
<img id="dt3" src="https://file.uhsea.com/2409/9d8ed563113f45ed3623b5f2f66305cfIV.png" alt="" />
<img id="player" src="https://638183.freep.cn/638183/web/svg/p2.svg" alt="" title="播放/暂停" />
<img id="msvg" src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" width="100%" height="100%" class="dynpic" />
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20231001204400.mp3" autoplay loop></audio>
</div>
<script>
var players = document.querySelectorAll('.player');
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
    papa: '#tz',
    scale: ,
    css: 'left: 50%; bottom: 20px; transform: translate(-50%); --bg: transparent; --color: #eee;',
});
//====================== 动态图片启停控制扩展============================
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
      this.storeCanvas.parentElement.removeChild(this.storeCanvas);
      this.storeCanvas = null;
      this.style.opacity = ''
      }
      if (this.storeUrl) {
      this.src = this.storeUrl
      }
    };
    HTMLImageElement.prototype.stop = function() {
      let suff = this.src.substr(-4);
      if (suff == '.') suff = suff.substr(1);
      if (suff == 'jpg') suff = 'jpeg';
      this.type = 'image/' + suff;
      var canvas = document.createElement('canvas');
      var width = this.width,
      height = this.height;
      if (width && height) {
      if (!this.storeUrl) {
          this.storeUrl = this.src
      }
      canvas.width = width;
      canvas.height = height;
      canvas.style.top = this.style.top;
      canvas.style.left = this.style.left;
      canvas.style.right = this.style.right;
      canvas.style.bottom = this.style.bottom;
      canvas.getContext('2d').drawImage(this, 0, 0, width, height);
      try {
          this.src = canvas.toDataURL(this.type)
      } catch (e) {
          this.removeAttribute('src');
          canvas.style.position = 'absolute';
          this.parentElement.insertBefore(canvas, this);
          this.style.opacity = '0';
          this.storeCanvas = canvas
      }
      }
    }
}
//=======================================================================
let dynpics = tz.querySelectorAll('.dynpic');
dynpicCtrl = (bool) => {
    bool ? dynpics.forEach(pic => pic.play()) : dynpics.forEach(pic => pic.stop())
}
mState = () => {
    tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    //msvg.style.setProperty('opacity', aud.paused ? '0' : '.8');
    dynpicCtrl(!aud.paused);
    player.title = aud.paused ? '播放' : '暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => {
    dynpicCtrl(aud.paused);
    aud.paused ? aud.play() : aud.pause();
}
</script>

小辣椒 发表于 2024-10-1 01:20

祝福微风论坛的朋友们国庆节快乐！

小辣椒 发表于 2024-10-1 01:22

代码粒子加背景粒子双粒子效果

liumang 发表于 2024-10-1 08:32

小辣椒 发表于 2024-10-1 01:22
代码粒子加背景粒子双粒子效果

小辣椒国庆节快乐！{:5_141:}{:5_146:}{:5_149:}

liumang 发表于 2024-10-1 08:33

小辣椒 发表于 2024-10-1 01:20
祝福微风论坛的朋友们国庆节快乐！长假好好休息！！！{:5_127:}{:5_127:}{:5_127:}

查看完整版本: 欢度国庆