论坛 › 欢乐水吧 › 【在这个世界相遇】学习黑师冥王星播放效果

雨中悄然 发表于 2023-2-21 22:10

【在这个世界相遇】学习黑师冥王星播放效果

<style>
#papa {
      margin: -80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      box-shadow: 3px 3px 20px #000;
      background: gray url('https://pic.imgdb.cn/item/63f4b978f144a0100796147c.gif') no-repeat center/cover;
      overflow: hidden;
      z-index: 1;
      position: relative;
}

#mplayer {
      --state: paused;
      position: absolute;
      right: 100px;
      top: 100px;
      width: 60px;
      height: 60px;
      background: DarkTurquoise;
      box-shadow: -10px -20px 30px navy inset;
      border-radius: 50%;
}
#mplayer::before, #mplayer::after {
      --deg: 360deg;
      position: absolute;
      content: '';
      right: -40px;
      top: -40px;
      bottom: -40px;
      left: -40px;
      border: 6px dotted lightgreen;
      border-radius: 50%;
      transform: perspective(1600px) rotateX(45deg) rotateY(15deg);
      animation: rot 8s linear infinite var(--state);
      cursor: pointer;
}
#mplayer::after {
      --deg: -360deg;
      right: -50px;
      top: -50px;
      left: -50px;
      bottom: -50px;
}

@keyframes rot { to { transform: perspective(1600px) rotateX(45deg) rotateY(15deg) rotateZ(var(--deg)); } }
@keyframes rot1 { to { transform: rotate(5deg); } }
@keyframes opa { from { opacity: 0; } to { opacity: .55; } }
</style>

<div id="papa">
      <div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=446247324.mp3" autoplay loop></audio>

<script>
(function() {
      (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());
      mplayer.addEventListener('click', () => { aud.paused ? (aud.play(), tt = setInterval(flash, 10), tt = null) : (aud.pause(), clearInterval(tt)); });
      FS({
                pa:papa,
                set:'left: 50%; transform: translate(-50%); bottom: 20px; background: transparent; color: lightgreen; border: 2px dotted lightgreen;',
      });
})();
</script>

雨中悄然 发表于 2023-2-21 22:10

歌词：
星月相掩 于大海上
微风摇曳 细雨也彷徨
流霞飞舞 群青深处
你我曾 相遇的地方
你是否已化作风雨
穿越时光 来到这里
秋去春来 海棠花开
你在梦里 我不愿醒来
每条大鱼 都会相遇
每一个人 都会重聚
生命旅程 往复不息
每个梦 都会有你
你是否已化作风雨
穿越时光 来到这里
秋去春来 海棠花开
你在梦里 我不愿醒来
每条大鱼 都会相遇
每一个人 都会重聚
生命旅程 往复不息
每一个梦 都会有你

雨中悄然 发表于 2023-2-21 22:11

《大鱼海棠》主题曲

雨中悄然 发表于 2023-2-21 22:11

@马黑黑 交份作业

雨中悄然 发表于 2023-2-21 22:12

这个小播改不好，先发{:4_170:}

马黑黑 发表于 2023-2-21 22:14

雨中悄然 发表于 2023-2-21 22:11
@马黑黑 交份作业

10000√

雨中悄然 发表于 2023-2-21 22:17

马黑黑 发表于 2023-2-21 22:14
10000√

{:4_170:}比珠峰还高

马黑黑 发表于 2023-2-21 22:18

雨中悄然 发表于 2023-2-21 22:17
比珠峰还高

高一点才好

雨中悄然 发表于 2023-2-21 22:19

马黑黑 发表于 2023-2-21 22:18
高一点才好

高兴才好{:4_199:}充电去了啊

千羽 发表于 2023-2-21 22:27

好温馨的画面，悄然的作业又是棒棒哒，{:4_187:}

马黑黑 发表于 2023-2-21 22:55

雨中悄然 发表于 2023-2-21 22:19
高兴才好充电去了啊

好的

红影 发表于 2023-2-21 23:25

悄然让这个播放器效果变得跟美了，跟这温馨的画面太匹配了，真棒{:4_199:}

庶民 发表于 2023-2-22 08:45

童话世界，美好的感觉。

海笑 发表于 2023-2-22 09:31

欣赏老师佳作！

雨中悄然 发表于 2023-2-22 12:21

千羽 发表于 2023-2-21 22:27
好温馨的画面，悄然的作业又是棒棒哒，

{:4_187:}给千羽送花花，看到你真开心

雨中悄然 发表于 2023-2-22 12:21

马黑黑 发表于 2023-2-21 22:55
好的

{:4_187:}给黑老师送花，中午好啊

雨中悄然 发表于 2023-2-22 12:23

红影 发表于 2023-2-21 23:25
悄然让这个播放器效果变得跟美了，跟这温馨的画面太匹配了，真棒

熟悉的影子回来了，来抱个{:4_183:}鼓励收到{:4_187:}

雨中悄然 发表于 2023-2-22 12:23

庶民 发表于 2023-2-22 08:45
童话世界，美好的感觉。

感谢回复支持

雨中悄然 发表于 2023-2-22 12:23

海笑 发表于 2023-2-22 09:31
欣赏老师佳作！

感谢临贴回复

马黑黑 发表于 2023-2-22 12:55

雨中悄然 发表于 2023-2-22 12:21
给黑老师送花，中午好啊

谢花不谢顶

查看完整版本: 【在这个世界相遇】学习黑师冥王星播放效果