朵拉 发表于 2023-12-26 20:18

安和桥（马黑黑原创）

本帖最后由 朵拉 于 2023-12-26 20:22 编辑 <br /><br /><style>
#papa {
      margin: 0 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      box-shadow: 4px 8px 28px gray;
      background: url('https://pic.imgdb.cn/item/658ac56bc458853aefc76467.jpg') no-repeat center/cover;
      overflow: hidden;
      z-index: 1;
      position: relative;
      --state: paused;
}
#player {
      position: absolute;
      left: 384px;
      top: 166px;
      width: 230px;
      height: 230px;
      cursor: pointer;
      animation: rotating 6s infinite alternate linear var(--state);
}
li-zi {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: navy;
      opacity: .75;
      animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
      position: absolute;
      top: -60px;
      width: 1024px;
      height: 700px;
      mix-blend-mode: screen;
      object-fit: cover;
      pointer-events: none;
}
@keyframes moving {
      from { transform: translate(var(--x0),var(--y0)); }
      to { transform: translate(var(--x1),var(--y1)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted></video>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27646205" autoplay loop></audio>
      <div id="player"></div>
</div>

<script>
let r = player.offsetWidth / 2 - 8, total = 120;
Array.from({length: total}).forEach((item,key) => {
      let rad0 = (Math.PI / 180) * 360 / total * key,
                rad1 = (Math.PI / 180) * (180 + (360 / total * key));
      item = document.createElement('li-zi');
      item.style.cssText += `
                --x0: ${r + r * Math.cos(rad0)}px;
                --y0: ${r + r * Math.sin(rad0)}px;
                --x1: ${r + r * Math.cos(rad1)}px;
                --y1: ${r + r * Math.sin(rad1)}px;
                --duration: ${2 + Math.random() * 3}s;
                --delay: -${Math.random() * 5}s;
                background: #${Math.random().toString(16).substr(-6)};
      `;
      player.appendChild(item);
});

let mState = () => {
      aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2023-12-26 20:24

@马黑黑
马师 晚上好，学生交作业，请指正哈~~{:4_190:}

马黑黑 发表于 2023-12-26 21:13

辛苦了

红影 发表于 2023-12-26 21:42

欣赏朵宝好帖{:4_204:}
页: [1]
查看完整版本: 安和桥（马黑黑原创）