在那银色的月光下（学习黑黑【秋】效果，套用一个）
<style>
#papa { left: -344px; width: 1280px; height: 650px; TOP: 150px; background: tan url('https://wj.zp68.com/lxx/yunhua/2022/08/30/bj.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 967px; bottom: 207px; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #f1fafb; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 650px; bottom: 75px; font: bold 1.5em sans-serif; color: Purple; text-shadow: 1px 1px 1px rgba(0,0,0,.75); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>
<div id="papa">
<span id="conicPlayer" data-per="00:00
00:00"></span>
<span id="lrctext">lrc歌词</span>
</div>
<script>
let lrcAr = [
['00.00','在那银色的月光下'],
['3.30','梦之旅三重唱'],
['9.88','谢谢黑黑教程分享'],
['22.82','在那金色沙滩上'],
['27.56','洒着银色的月光'],
['32.82','寻找往事踪影'],
['37.82','往事踪影迷茫'],
['42.98','寻找往事踪影'],
['48.39','往事踪影迷茫'],
['54.00','往事踪影迷茫'],
['58.74','犹如幻梦一样'],
['64.36','你在何处躲藏'],
['68.92','背弃我的姑娘'],
['74.24','你在何处躲藏'],
['78.99','背弃我的姑娘'],
['84.62','LRC编辑：小辣椒'],
['100.14','往事踪影迷茫'],
['104.81','犹如幻梦一样'],
['110.14','你在何处躲藏'],
['115.21','背弃我的姑娘'],
['120.90','你在何处躲藏'],
['125.58','背弃我的姑----娘'],
['137.62','梦之旅三重唱'],
['148.55','我骑在马上'],
['153.46','箭一样地飞翔'],
['159.09','飞呀飞呀我的马'],
['164.00','朝着它去的方向'],
['169.34','飞呀飞呀我的马'],
['174.26','朝着它去的方向'],
['190.16','谢谢欣赏！'],
['199.14','谢谢欣赏！']
];
let aud = new Audio();
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/08/30/znysdygx.mp3';
aud.autoplay = true;
aud.loop = true;
conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
let current = aud.currentTime / aud.duration * 100;
conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
}
});
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>
<br><br><br><br><br><br><br><br><br><br> @马黑黑
这个图图现成的，又偷懒了{:4_189:} 完美结合 又是频谱，还有背景动画。这个播放器真好看！{:4_199:} 几个动图加得漂亮啊 亲爱的吧圆环播放器用在这个效果上，很漂亮呢。真聪明{:4_199:} 马黑黑 发表于 2022-8-30 20:19
完美结合
谢谢黑黑的教程分享，昨天晚上下了去做了2个帖{:4_189:} 加林森 发表于 2022-8-30 20:30
又是频谱，还有背景动画。这个播放器真好看！
谢谢队长欣赏{:4_187:} 绿叶清舟 发表于 2022-8-30 20:41
几个动图加得漂亮啊
清舟好，加了2个频谱效果上去 红影 发表于 2022-8-30 20:45
亲爱的吧圆环播放器用在这个效果上，很漂亮呢。真聪明
这个图图都玩了2次了，感觉圆的刚好配上去 小辣椒 发表于 2022-8-30 20:48
清舟好，加了2个频谱效果上去
整体效果很谐调的，厉害了 小辣椒 发表于 2022-8-30 20:47
谢谢队长欣赏
非常喜欢的制作。{:4_190:} 小辣椒 发表于 2022-8-30 20:47
谢谢黑黑的教程分享，昨天晚上下了去做了2个帖
也是速度的 小辣椒 发表于 2022-8-30 20:50
这个图图都玩了2次了，感觉圆的刚好配上去
亲爱的累积丰厚，用的时候才会变成正好{:4_199:} 图意和歌曲，都特别棒~！赞小辣椒友友作品~！{:4_204:} {:4_208:} 绿叶清舟 发表于 2022-8-30 20:54
整体效果很谐调的，厉害了
这个真不厉害，昨天看见清舟的图图太美了 加林森 发表于 2022-8-30 20:56
非常喜欢的制作。
都是以前的图图了 马黑黑 发表于 2022-8-30 21:29
也是速度的
不能和黑黑比的，我就是套用啊，速度肯定快的
页:
[1]
2