首页 › 浅吟轻唱 › 王 招 君

青衫隐 发表于 2024-2-19 21:16:20

王 招 君

<style>
#mplayer {
      margin: 20px auto;
      width: 200px;
      height: 120px;
      background: linear-gradient(tan,navy,transparent);
      box-shadow: 0 0 8px #666, 0 0 50px #999 inset, 0 0 20px #666;
      color: antiquewhite;
      display: grid;
      place-items: center;
      position: relative;
      --prg: 25%; --state: paused;
}
#mplayer > span { position: absolute; }
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
}
#mplayer::before {
      left: 6px;
      top: 6px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: gray;
      box-shadow: 178px 0 0 gray, 0 98px 0 0 gray, 178px 98px 0 0 gray;
}
/*
#mplayer::after {
      width: 78px;
      height: 24px;
      border-radius: 24px;
      background: lightgray;
}
*/
#btnP1, #btnP2 {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid silver;
      display: grid;
      place-items: center;
      cursor: pointer;
      animation: rot 5s infinite linear var(--state);
}
#btnP1 {
      left: 20px;
      background: gray radial-gradient(
                transparent,
                transparent 20%,
                #000 calc(20% + 1px),
                #000 calc(100% - var(--prg)),
                transparent calc(100% - var(--prg) + 1px),
                transparent 0
      );
}
#btnP2 {
      right: 20px;
      background: gray radial-gradient(
                transparent,
                transparent 20%,
                #000 calc(20% + 1px),
                #000 var(--prg),
                transparent calc(var(--prg) + 1px),
                transparent 0
      );
}
#btnP1::after, #btnP2::after {
      position: absolute;
      content: '';
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px dotted rgba(250,250,250,.7);
}
#titP { top: 10px; font-size: 12px; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mplayer">
      <span id="titP">翻：青衫隐</span>
      <span id="btnP1"></span>
      <span id="btnP2"></span>
</div>
<audio id="aud" src="http://wp.lsjwldx.com/myfile/%E6%9C%B5%E6%8B%89/wangzhaojun.mp3" autoplay="" loop=""></audio>



<script>

let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
      let prg = aud.currentTime / aud.duration * 100 + 20;
      mplayer.style.setProperty('--prg', prg + '%');
});
btnP1.onclick = btnP2.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

青衫隐 发表于 2024-2-19 21:17:11

本帖最后由 青衫隐 于 2024-2-19 21:27 编辑

歌词：

我多平常
我可以推开过往
我多能撒谎
谁能推开过往
局是局的局
庄是庄的庄
听无常 胡坦荡

生是生的生
忘是忘的忘
不打量 别打量
你看花儿多红啊
笑话一般 散落地上
你看世间朗朗有光照
留了树荫送我乘凉

你看你拉住我的模样
你别慌张 你如此慌张
你看十里繁华长街长
看满荒唐写纸上

有多狂妄
敢去走过的地方
敢无事一样
捡起路过的月亮
鱼是鱼的鱼
光是光的光
都无常 都坦荡

你看我盼着你的模样
我没假装 我不会假装
你看十里繁华长街长
看满荒唐写纸上
都无常 谁坦荡
不打量 别打量

青依。 发表于 2024-2-19 22:57:24

青衫家大沙发。。坐了{:10_661:}

青依。 发表于 2024-2-19 22:58:24

轻柔舒缓，美美哒好听{:10_415:}

青依。 发表于 2024-2-19 22:59:54

细细聆听。问好青衫新年快乐。。常来玩耍{:10_472:}

雷少 发表于 2024-2-20 03:00:37

挂着听。好享受。。给帅哥点赞！！

轻音向暖 发表于 2024-2-23 16:27:21

一直喜欢这首歌，去年第一次听就收藏了的
歌词不错，旋律也非常好
青衫帅唱的好极了~
喜欢喜欢~
元宵节快乐哈~

贪心的鱼 发表于 2024-2-26 18:09:22

娓娓道来的好声音 循环中{:17_871:}

甘蓝 发表于 2024-2-27 13:50:23

窝滴个神哟，青衫帅帅唱新歌喽呀悄眯眯滴高兴一大个个，好生喜欢滴蛐蛐儿唱滴太好喽，立马马超级级陶醉滴循环听起{:20_1083:}

甘蓝 发表于 2024-2-27 13:50:51

青衫帅帅新年快乐，唱歌快乐，玩耍快乐{:13_634:}

查看完整版本: 王 招 君