D.C.-Bassy（学习老黑“永不消逝的电波”制作）
本帖最后由 加林森 于 2022-9-11 21:44 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 576px; background: gray url('https://pic.imgdb.cn/item/631d578416f2c2beb1d04830.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display:grid; place-items: center; user-select: none; overflow: hidden; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 10px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; z-index: 9; }
#btnwrap { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(to top right, lightblue, blue); cursor: pointer; }
#btnwrap:hover：#FFA500; { background: linear-gradient(to top right, snow, teal); }
#btnplay { width: 20px; height: 20px; background: #1E90FF; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { width: 300px; height: 2px; background: #7FFF00;linear-gradient(to right,red,orange,blue,tomato) no-repeat; background-size: 1px 2px; cursor: pointer; position: relative;}
#prog::before { position: absolute; content: ''; top: -7px; width: inherit; height: 15px; }
#prog:hover::before { background: rgba(200,200,200,.15); }
#tmsg { font: normal 16px sans-serif; color: snow;}
#lrc { position: absolute; left: 20px; top: 20px; font: bold 1.5em sans-serif; color:skyblue; text-shadow: 2px 2px 2px #222; opacity: 1; animation: opa 1.5s infinite alternate; }
#wave { position: absolute; display:block; top: 0; }
@keyframes opa { to #F0E68C;{ opacity: .3;} }
</style>
<div id="papa">
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
<div id="lrc"></div>
<svg id="wave" width="600" height="600"> <!-- 模拟电波 -->
<circle cx="300" cy="300" r="0" fill="none" stroke="lightgreen" stroke-width="4">
<animate attributeName="r" begin="0s" from="0" to="290" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="stroke-opacity" begin="0s" from="0.5" to="0" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="300" cy="300" r="0" fill="none" stroke="skyblue" stroke-width="3">
<animate attributeName="r" begin="0.5s" from="0" to="290" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="stroke-opacity" begin="0.5s" from="0.5" to="0" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="300" cy="300" r="0" fill="none" stroke="lightblue" stroke-width="2">
<animate attributeName="r" begin="1s" from="0" to="290" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="stroke-opacity" begin="1s" from="0.5" to="0" dur="2s" repeatCount="indefinite"></animate>
</circle>
<circle cx="300" cy="300" r="0" fill="none" stroke="red" stroke-width="1">
<animate attributeName="r" begin="1.5s" from="0" to="290" dur="2s" repeatCount="indefinite"></animate>
<animate attributeName="stroke-opacity" begin="1.5s" from="0.5" to="0" dur="2s" repeatCount="indefinite"></animate>
</circle>
</svg>
</div>
<script>
let lrcAr = [
['0.00','D.C.'],
['240.00','感谢支持']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=22770507.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = prog.offsetWidth * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script> @马黑黑 小蛮腰发出什么信号呢{:4_170:} 马黑黑 发表于 2022-9-11 17:42
小蛮腰发出什么信号呢
放电开始。{:4_189:} 歌词：
長く伸びた道を帰ろう
【归去吧 沿着这条漫长的小道】
凍えたこの手を離そう
【放开吧 这只已然冻僵的手】
その場所まで行けなかった
【我最后还是没能前往那个地方】
本当の事言えなかった
【我最后还是没能说出心中所想】
明日の事知らなかった 君も 僕も
【谁也不知道明天会发生什么 无论你 还是我】
いつかは この手も 失うのかな
【总有一天 这一双手 我是否也将就此失去？】
その時 僕らは 許せるのかな
【待得那时 我们是否 也能若无其事地接受？】
きっとその次があると
【如果这条路的后面还存在着延续】
いつも先延ばししてた
【我想它一定会继续通往远方】
最後のドア開けたこと
【最后的门扉已被开启】
通り過ぎた人のこと
【过往的行人匆匆而逝】
話してきた夢の先 すべて 委ね
【你曾经对我说过的美梦前方 这一切 都交付其中】
それでも この瞳は 君を映した
【即便如此 我的眼眸 依然映现着你的面容】
汚れた 心は 嘘で固めた
【这一颗心 已被玷污 只能靠谎言来继续坚强】
こうして 僕らは 言葉を選び
【就像这样 我们谨慎地选择合适的言辞】
やさしい 振りして その時を待つ
【故作温柔 一起静静等待那一刻的到来】
行き交う人の その流れの中で
【往来交错 身处不断流动的人潮中】
昨日と違う 空気になっても
【即便周遭的空气 也已经与昨日截然不同】
知らないうちに また同じ場所へと
【不知不觉之中 我却再次前往同样的地方】
繰り返す 迷路の様に
【总是如此重复 就像迷失了路途】
もうすぐ 明日の 準備をしなきゃ
【再过不久 我就必须 为了明天而做好准备】
長い長い 旅へと このドアを出る
【踏上这条 漫长旅路 离开这扇门扉再无归期】
昨日の 荷物が まだ重いけど
【寄于昨日 诸多行李 尽管依然觉得异常沉重】
知らない 間に 慣れるようだな
【不知不觉 如此这般 我似乎也已经慢慢习惯】
いつかは この手も 失うのかな
【总有一天 这一双手 我是否也将就此失去？】
その時 僕らは 許せるのかな
【待得那时 我们是否 也能若无其事地接受？】
ねえ 遠くに 見えてた場所が
【呐 放眼远方 那个隐约可见的地方】
気付けば この手を伸ばし 触れられそうだ
【察觉到时 伸出这双手去 似乎就能轻易触及】 加林森 发表于 2022-9-11 17:43
放电开始。
给你发电报吗{:4_170:} 马黑黑 发表于 2022-9-11 17:45
给你发电报吗
准备偷跑过去。。。。{:4_170:} 马黑黑 发表于 2022-9-11 17:45
给你发电报吗
老黑，我感觉播放器按钮我不能变颜色呢？还有就是进度时间也不能修改。能不能教教我。{:5_109:} 加林森 发表于 2022-9-11 18:04
老黑，我感觉播放器按钮我不能变颜色呢？还有就是进度时间也不能修改。能不能教教我。
进度文本的CSS选择器是 #tmsg，那里有个 color 值。
按钮的颜色也在CSS那里改：#btnwrap，还有 #btnwrap:hover 加林森 发表于 2022-9-11 17:49
准备偷跑过去。。。。
挺好 马黑黑 发表于 2022-9-11 18:19
挺好
还好啊？{:4_203:} 马黑黑 发表于 2022-9-11 18:19
进度文本的CSS选择器是 #tmsg，那里有个 color 值。
按钮的颜色也在CSS那里改：#btnwrap，还有 #btnwr ...
好的好的。谢谢啊！ 哇！加加还这么卡哇伊啊？{:5_116:} 东篱闲人 发表于 2022-9-11 19:22
哇！加加还这么卡哇伊啊？
你老顽童都可以玩，我也玩玩。。。。{:4_189:} 萌萌的日本小妞 上海朝阳 发表于 2022-9-11 19:28
萌萌的日本小妞
是啊。挺好玩的。 加林森 发表于 2022-9-11 19:27
你老顽童都可以玩，我也玩玩。。。。
{:5_116:} 制作漂亮，欣赏队长好帖{:4_204:} 东篱闲人 发表于 2022-9-11 20:34
{:4_176:} 红影 发表于 2022-9-11 20:42
制作漂亮，欣赏队长好帖
谢谢红影！
页:
[1]
2