李健 - 贝加尔湖畔 - 音乐沙龙 - 花潮论坛

马黑黑 发表于 2022-9-22 07:25

李健 - 贝加尔湖畔

马黑黑 发表于 2022-9-22 07:40

本帖最后由马黑黑于 2022-9-22 07:43 编辑

本帖 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- 前缀激活。

马黑黑 发表于 2022-9-22 07:45

本帖完整代码（本地测试模式）：
<style>
#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; }
#mplayer { position: absolute; bottom: 4px; width: 240px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, snow, darkgreen); opacity: 1; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; border-radius: 50%; border: 4px solid lightgreen; opacity: 0.1;}
#btnplay { width: 20px; height: 20px; background: #eee; 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 { --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; }
#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; }
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>

<div id="papa">
<div id="lrc">花潮lrc在线</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>

<script>
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
let mKey = 0, mFlag = true, aud = new Audio();

prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/29/357d900bcae5a1788c32ac7df6c0d20d.mp3';
aud.autoplay = true;
aud.loop = true;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());

aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,0,0,.75) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) {
if(mKey === j) showLrc(lrcAr);
else continue;
}
}
});

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');

let showLrc = (time) => {
lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
lrc.innerHTML = lrcAr;
mKey += 1;
mFlag = !mFlag;
}

let calcKey = () => {
for(j = 0; j < lrcAr.length; j ++) {
if(aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if(mKey <0) mKey = 0;
if(mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let mtime = lrcAr - (aud.currentTime - lrcAr);
showLrc(mtime);
}

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>

红影发表于 2022-9-22 09:35

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

红影发表于 2022-9-22 09:36

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

马黑黑 发表于 2022-9-22 12:35

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

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

红影发表于 2022-9-22 15:52

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

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

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

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

还好

红影发表于 2022-9-22 19:27

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

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

马黑黑 发表于 2022-9-22 20:32

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

不要阴影就少一个弯

千羽发表于 2022-9-22 20:34

景美，图美歌儿也很美{:4_187:}

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

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

人也美{:4_170:}

醉美水芙蓉 发表于 2022-9-22 20:37

千羽发表于 2022-9-22 20:41

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

没看到人{:4_203:}

红影发表于 2022-9-22 21:02

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

肯定要啊，这样又学了一招呢{:4_187:}

马黑黑 发表于 2022-9-22 21:28

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

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

马黑黑 发表于 2022-9-22 21:29

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

想象

马黑黑 发表于 2022-9-22 21:30

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

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

绿叶清舟 发表于 2022-9-22 21:53

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

红影发表于 2022-9-22 22:01

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

非常漂亮{:4_187:}

页: [1] 2 3 4

花潮论坛's Archiver

李健 - 贝加尔湖畔