李健 - 贝加尔湖畔

马黑黑

花潮lrc在线

00:00 | 00:00

马黑黑

本帖 lrc 歌词的描边字效果用纯 CSS 实现，想了解其原理和更多信息的可参考：

        纯CSS描边字

然后，利用 background-clip: text; 属性设置，将线性渐变背景应用到文字上，最后再使用 filter: drop-shadow(2px 2px 4px #000); 属性设置给文字设置阴影——实际上是 #lrc 的盒子阴影，因为盒子的外观仅以 text 形式展现，故此 filter 滤镜产生的阴影全部投射为文本阴影。应该注意的是，此处不能使用 text-shadow 属性，会破坏整个设计效果。

#lrc 盒子代码：

#lrc {
        position: absolute;
        top: 10px;
        font: bold 2.4em sans-serif;
        color: transparent;
        background: linear-gradient(-90deg, darkgreen, transparent) 0 0 / 200% 200%;
        filter: drop-shadow(2px 2px 4px #000);
        background-clip: text;
        -webkit-background-clip: text;
        text-stroke: 1px lightgreen;
        -webkit-text-stroke: 1px lightgreen;
}


后四行代码实际上是两行，-webkit- 前缀表示兼容 webkit 内核的系列浏览器（如新版Edge、Chrome、百分浏览器等），这是因为尽管这些浏览器支持这些属性，但这些属性仍处于实验性阶段，浏览器的潜在支持能力需要使用 -webkit- 前缀激活。

马黑黑

本帖完整代码（本地测试模式）：

1. <style>
   
2.         #papa { margin: auto; width: 1024px; height: 640px; background: url('./pic/bjehp.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; box-shadow: 3px 3px 20px #000; display: flex; justify-content: center; overflow: hidden; position: relative; z-index: 1; }
   
3.         #mplayer { position: absolute; bottom: 4px; width: 240px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
   
4.         #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
   
5.         #mplayer:hover #btnwrap { background: linear-gradient(to top right, snow, darkgreen); opacity: 1; }
   
6.         #btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
   
7.         #btnwrap { --yy: -15px; width: 40px; height: 40px; border-radius: 50%; border: 4px solid lightgreen; opacity: 0.1;}
   
8.         #btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
   
9.         #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
   
10.         #prog { --yy: 20px; width: 240px; height: 18px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,0,0,.75) 100%, transparent 0); border: 1px solid lightgreen; font: normal 14px/18px sans-serif; color: snow; }
    
11.         #lrc { position: absolute; top: 10px; font: bold 2.4em sans-serif; color: transparent; background: linear-gradient(-90deg, darkgreen, transparent) 0 0 / 200% 200%; filter: drop-shadow(2px 2px 4px #000); background-clip: text; -webkit-background-clip: text; text-stroke: 1px lightgreen; -webkit-text-stroke: 1px lightgreen; }
    
12.         @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
    
13.         @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
    
14. </style>
    
15. 
    
16. <div id="papa">
    
17.         <div id="lrc">花潮lrc在线</div>
    
18.         <div id="mplayer">
    
19.                 <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
    
20.                 <div id="prog">00:00 | 00:00</div>
    
21.         </div>
    
22. </div>
    
23. 
    
24. <script>
    
25. let lrcAr = [
    
26.         [0,"词 | 曲 | 演唱: 李健",46.5],
    
27.         [47.8,"在我的怀里 在你的眼里",6.3],
    
28.         [55.78,"那里春风沉醉 那里绿草如茵",6.3],
    
29.         [63.85,"月光把爱恋 洒满了湖面",6.4],
    
30.         [71.8,"两个人的篝火 照亮整个夜晚",5.7],
    
31.         [78.01,"多少年以后 如云般游走",6.0],
    
32.         [85.8,"那变换的脚步 让我们难牵手",6.2],
    
33.         [93.54,"这一生一世 有多少你我",6.9],
    
34.         [101.74,"被吞没在月光如水的夜里",7.2],
    
35.         [113.9,"多想某一天 往日又重现",6.2],
    
36.         [121.75,"我们流连忘返 在贝加尔湖畔",6.6],
    
37.         [162,"多少年以后 往事随云走",6.6],
    
38.         [169.72,"那纷飞的冰雪容不下那温柔",6.7],
    
39.         [177.77,"这一生一世 这时间太少",7.4],
    
40.         [185.75,"不够证明融化冰雪的深情",7.7],
    
41.         [197.81,"就在某一天 你忽然出现",6.0],
    
42.         [205.91,"你清澈又神秘 在贝加尔湖畔",6.2],
    
43.         [213.02,"你清澈又神秘 像贝加尔湖畔",7.8]
    
44. ];
    
45. let mKey = 0, mFlag = true, aud = new Audio();
    
46. 
    
47. prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
    
48. aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/29/357d900bcae5a1788c32ac7df6c0d20d.mp3';
    
49. aud.autoplay = true;
    
50. aud.loop = true;
    
51. 
    
52. btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
    
53. 
    
54. aud.addEventListener('pause', () => mState());
    
55. aud.addEventListener('play', () => mState());
    
56. aud.addEventListener('seeked', () => calcKey());
    
57. 
    
58. aud.addEventListener('timeupdate', () => {
    
59.         prog.style.background= 'linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,0,0,.75) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
    
60.         prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
    
61.         for(j=0; j<lrcAr.length; j++) {
    
62.                 if(aud.currentTime >= lrcAr[j][0]) {
    
63.                         if(mKey === j) showLrc(lrcAr[j][2]);
    
64.                         else continue;
    
65.                 }
    
66.         }
    
67. });
    
68. 
    
69. let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
    
70. 
    
71. let showLrc = (time) => {
    
72.         lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
    
73.         lrc.innerHTML = lrcAr[mKey][1];
    
74.         mKey += 1;
    
75.         mFlag = !mFlag;
    
76. }
    
77. 
    
78. let calcKey = () => {
    
79.         for(j = 0; j < lrcAr.length; j ++) {
    
80.                 if(aud.currentTime <= lrcAr[j][0]) {
    
81.                         mKey = j - 1;
    
82.                         break;
    
83.                 }
    
84.         }
    
85.         if(mKey <0) mKey = 0;
    
86.         if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
    
87.         let mtime = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
    
88.         showLrc(mtime);
    
89. }
    
90. 
    
91. let toMin = (val)  => {
    
92.         if (!val) return '00:00';
    
93.         val = Math.floor(val);
    
94.         let min = parseInt(val / 60), sec = parseFloat(val % 60);
    
95.         if(min < 10) min = '0' + min;
    
96.         if(sec < 10) sec = '0' + sec;
    
97.         return min + ':' + sec;
    
98. }
    
99. </script>

复制代码

红影

喜欢的歌曲，又是在单位能听到的，所以边看说明边先听了几遍

红影

这歌词效果漂亮，而且同样是有歌词变色且评分不影响继续播放的

马黑黑

红影 发表于 2022-9-22 09:36
这歌词效果漂亮，而且同样是有歌词变色且评分不影响继续播放的

这个播放器没有使用svg，是CSS+HTML构造的，感觉它比较合适这个版本的论坛

红影

马黑黑 发表于 2022-9-22 12:35
这个播放器没有使用svg，是CSS+HTML构造的，感觉它比较合适这个版本的论坛

哦，不同构造，效果不同的吧。

马黑黑

红影 发表于 2022-9-22 15:52
哦，不同构造，效果不同的吧。

还好

红影

马黑黑 发表于 2022-9-22 18:13
还好

“因为盒子的外观仅以 text 形式展现，故此 filter 滤镜产生的阴影全部投射为文本阴影。”
描边字的渐变，还有文字投影，这个帖子对歌词文字处理转了2个弯呢。

马黑黑

红影 发表于 2022-9-22 19:27
“因为盒子的外观仅以 text 形式展现，故此 filter 滤镜产生的阴影全部投射为文本阴影。”
描边字的渐变 ...

不要阴影就少一个弯

千羽

景美，图美歌儿也很美

马黑黑

千羽 发表于 2022-9-22 20:34
景美，图美歌儿也很美

人也美

千羽

马黑黑 发表于 2022-9-22 20:35
人也美

没看到人

红影

马黑黑 发表于 2022-9-22 20:32
不要阴影就少一个弯

肯定要啊，这样又学了一招呢

马黑黑

红影 发表于 2022-9-22 21:02
肯定要啊，这样又学了一招呢

这就是一个简单的综合运用

马黑黑

千羽 发表于 2022-9-22 20:41
没看到人

想象

马黑黑

醉美水芙蓉 发表于 2022-9-22 20:37
很多人喜欢的歌曲！

歌是正能量的，并且悠扬豪迈

绿叶清舟

这个字体漂亮，改变滤镜会是啥效果呢

红影

马黑黑 发表于 2022-9-22 21:28
这就是一个简单的综合运用

非常漂亮