东篱闲人 发表于 2024-6-13 22:16

黑黑的天空

<style>
#tz { margin: 30px 0 30px calc(100% - 721px); width: 416px; height: 668px; background: url('https://pic.imgdb.cn/item/666adeaad9c307b7e9d31aee.gif') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#lrc { position: absolute; left: 120px; top: 520px; font: normal 20px sans-serif; white-space: nowrap; color: darkgreen; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }
#player { position: absolute; left: calc(50% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: green; --prg: 0%; --btnSize: 50px;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat center/cover; filter: hue-rotate(180deg); animation: rot 6s linear infinite var(--state);}
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }
</style>

<div id="tz">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1475472363" autoplay loop></audio>
      <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec4946e64cc5.mp4" autoplay loop muted></video>
      <div id="lrc">HUACHAO PLAYER</div>
      <div id="player" data-time="00:00 00:00"></div>
</div>

<script>
var vids = document.querySelectorAll('.vid');
var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));

var lrcKey = 0;

var showLrc = () => {
      if(lrcKey >= lrcAr.length) return false;
      lrc.innerText = lrcAr;
      lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');
      lrcKey ++;
};

var mState = () => {
      tz.style.setProperty('--state',['running','paused'][+aud.paused]);
      if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};

var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');

aud.onplaying = aud.onpause = () => mState();

aud.onseeked = () => {
      for(var j = 0; j < lrcAr.length; j ++) {
                if(aud.currentTime < lrcAr) {
                        lrcKey = j - 1;
                        if(lrcKey < 0) lrcKey = 0;
                        break;
                }
      }
};

aud.ontimeupdate = () => {
      player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');
      player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);
      if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr) showLrc();
}

player.onclick = (e) => {
      if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;
      if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();
}

player.onmousemove = (e) => {
      if(e.offsetY < 0) {
                if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {
                        player.title = aud.paused ? '播放' : '暂停';
                        player.style.cursor = 'pointer';
                }
      }else{
                player.title = '调节进度';
                player.style.cursor = 'pointer';
      }
};

var lrcAr = [['0.00','作词 : 池阁'],
        ['1.00','作曲 : 池阁'],
        ['2.00','编曲 : 池阁'],
        ['10.68','黑黑的天空满天的星星'],
        ['18.72','绿绿的草地暖暖的后背'],
        ['26.52','远方的山丘吹来一阵风'],
        ['34.32','吹落了树叶落在你怀中'],
        ['42.09','你这个人啊要怎么说你呢'],
        ['49.86','都这么晚了你还不回家'],
        ['57.60','你不知道我很担心你'],
        ['65.31','怕你一个人走夜路'],
        ['68.43','想送你回家'],
        ['75.63','短发的女孩'],
        ['79.56','你笑得可爱'],
        ['84.51','可我从未想过你离开'],
        ['91.17','茫茫的人海'],
        ['95.04','模糊了眼睛'],
        ['100.29','你要去哪儿'],
        ['102.36','短发的女孩']
];
</script>

马黑黑 发表于 2024-6-13 23:32

{:4_199:}

小辣椒 发表于 2024-6-13 23:54

老头厉害，看看都会了{:4_178:}

梦油 发表于 2024-6-14 09:19

腾空而来的骏马——独到的设计。{:5_116:}

东篱闲人 发表于 2024-6-14 09:33

小辣椒 发表于 2024-6-13 23:54
老头厉害，看看都会了

俺看着大概是这个意思。。。{:5_117:}

东篱闲人 发表于 2024-6-14 09:33

马黑黑 发表于 2024-6-13 23:32


{:4_176:}

东篱闲人 发表于 2024-6-14 09:33

梦油 发表于 2024-6-14 09:19
腾空而来的骏马——独到的设计。

黑马，马黑黑嘛。。。{:4_189:}

红影 发表于 2024-6-14 09:44

黑黑的天空，是一匹神俊的黑马，这个寓意好。
欣赏东篱大哥好帖{:4_199:}

醉美水芙蓉 发表于 2024-6-14 11:31

东篱闲人 发表于 2024-6-14 11:43

红影 发表于 2024-6-14 09:44
黑黑的天空，是一匹神俊的黑马，这个寓意好。
欣赏东篱大哥好帖

这马黑不？{:5_117:}

东篱闲人 发表于 2024-6-14 11:43

醉美水芙蓉 发表于 2024-6-14 11:31
欣赏东篱老师带来的精彩！

芙蓉喝水。。。{:4_180:}

梦江南 发表于 2024-6-14 13:38

欣赏老师的精彩制作！{:4_187:}

东篱闲人 发表于 2024-6-14 14:47

梦江南 发表于 2024-6-14 13:38
欣赏老师的精彩制作！

{:4_190:}

红影 发表于 2024-6-14 14:48

东篱闲人 发表于 2024-6-14 11:43
这马黑不？

黑亮黑亮的，特别神俊{:4_187:}

东篱闲人 发表于 2024-6-14 14:49

红影 发表于 2024-6-14 14:48
黑亮黑亮的，特别神俊

他叫马黑黑。。。{:5_116:}

梦油 发表于 2024-6-14 16:28

东篱闲人 发表于 2024-6-14 09:33
黑马，马黑黑嘛。。。

你的设计很巧妙。

红影 发表于 2024-6-14 21:59

东篱闲人 发表于 2024-6-14 14:49
他叫马黑黑。。。

我觉得寓意是横空出世的黑马的意思{:4_173:}

东篱闲人 发表于 2024-6-14 22:01

红影 发表于 2024-6-14 21:59
我觉得寓意是横空出世的黑马的意思

嗯嗯，你说咋是咋。。。{:4_181:}

红影 发表于 2024-6-15 10:19

东篱闲人 发表于 2024-6-14 22:01
嗯嗯，你说咋是咋。。。

我以前去过一个黑马免费论坛，还有自己的地方，后来哪里关了，记得黑黑说过是他办的。
感觉他应该前面叫黑马，后来改名马黑的吧。

东篱闲人 发表于 2024-6-15 12:13

红影 发表于 2024-6-15 10:19
我以前去过一个黑马免费论坛，还有自己的地方，后来哪里关了，记得黑黑说过是他办的。
感觉他应该前面叫 ...

反正就是和黑马干上了。。。{:4_181:}
页: [1] 2
查看完整版本: 黑黑的天空