烛影

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/vuyk.jpg') no-repeat center/cover; border-radius: 20px 0; box-shadow: 3px 3px 12px black; z-index: 1; position: relative; }
   
3.         #tz::before { content: attr(data-lrc); position: absolute; bottom: 10px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
   
4.         #player { left: calc(50% - 50px); bottom: 80px; width: 100px; height: 100px; filter: drop-shadow(0 0 40px cyan); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
   
5.         #vid { position: absolute; top: 0; width: 160px; height: 260px; clip-path: circle(60%); object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; }
   
6.         #player:hover { width: 120px; height: 120px; filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
   
7.         c-c { position: absolute; width: 80%; height: 80%; border: thick inset plum; border-radius: 100% 20%; opacity: .75; }
   
8.         @keyframes rot { to { transform: rotate(1turn); } }
   
9. </style>
   
10. 
    
11. <div id="tz" data-lrc="烛影">
    
12.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1995785157" autoplay loop></audio>
    
13.         <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b48ded397d72.mp4" autoplay loop muted disablePictureInPicture></video>
    
14.         <div id="player"></div>
    
15. </div>
    
16. 
    
17. <script>
    
18. var curkey = 0, lrcAr = [], total = 10;
    
19. Array.from({length: total}).forEach((c,k) => {
    
20.         c = document.createElement('c-c');
    
21.         c.style.cssText += `
    
22.                 transform: rotate(${360 / total * k}deg);
    
23.                 border-color: #${Math.random().toString(16).substring(2,8)};
    
24.         `;
    
25.         player.appendChild(c);
    
26. });
    
27. var getAr = (text) => {
    
28.         var ar = text.trim().split('\n');
    
29.         ar.sort();
    
30.         var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    
31.         ar.forEach(item => {
    
32.                 let result = item.match(reg);
    
33.                 let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
    
34.                 lrcAr.push([tmsg, result[4].trim()]);
    
35.         });
    
36. };
    
37. var mState = () => {
    
38.         tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
    
39.         player.title = ['暂停','播放'][+aud.paused];
    
40. };
    
41. aud.onseeked = () => curkey = 0;
    
42. aud.onplaying = aud.onpause = () => mState();
    
43. aud.ontimeupdate = () => {
    
44.         if(curkey > lrcAr.length - 1) return;
    
45.         if(aud.currentTime >= lrcAr[curkey][0]) {
    
46.                 tz.dataset.lrc = lrcAr[curkey][1];
    
47.                 curkey ++;
    
48.         }
    
49. };
    
50. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
51. 
    
52. var lrc = `[00:00.500]WENDY·白 - 烛影\n[00:10.980]hey babe你不用太着急\n[00:13.470]we got time\n[00:14.580]屋外又下起了小雨\n[00:16.380]倒一杯红酒\n[00:17.580]窝进沙发里\n[00:19.230]轻晃的烛影藏着我们的秘密\n[00:22.830]Bing bing闪烁装有我的眼睛\n[00:25.590]纤细的手指不止能弹钢琴\n[00:28.530]do re mi fa so la si如果你想听\n[00:33.750]找部电影其实你早看过了\n[00:36.690]管他呢谁不世界的过客\n[00:39.510]反正到最后也没几人会记得\n[00:43.560]youdon't have to say sorry\n[00:45.630]怎么会有那么多顾虑\n[00:48.150]我们之间已经隔了太多的事情\n[00:50.820]不止玻璃流下雨滴\n[00:52.440]什么工具能留住香气\n[00:57.060]close get close to紧扣的掌心\n[01:02.400]我的耳朵只听得见你的声音\n[01:07.980]统一的心率连着呼吸\n[01:10.590]像棉花糖融化进了水里\n[01:14.340]（ only u）在我身边调动情绪才是安心\n[01:19.620]please back my butterfly\n[01:25.290]第一眼的喜欢你让我怎么释怀\n[01:30.810]我试着调整了没有你的生活状态\n[01:36.510]看起来多彩\n[01:37.770]对我而言还是黑白\n[01:42.420]please back my butterfly\n[01:48.090]只有把你变成记忆才不会被人打败\n[01:53.640]你是否也会在某个时间突然想起我来\n[01:59.520]顺风入怀＞三十六度温暖\n[02:05.550]回忆不攻自破\n[02:07.710]带着花纹心的脉络\n[02:10.590]他们劝我忘了\n[02:12.030]忘了这本不该发生的\n[02:16.110]（ how can i do that）\n[02:16.440]怎么忘了挂着小兔子的（蓝色）毛衣\n[02:19.260]怎么忘了你那闪烁装有我的眼睛\n[02:22.410]怎么忘了烛影里藏着我们的秘密\n[02:28.500]不止玻璃流下雨滴\n[02:34.020]什么工具能留住香气\n[02:40.800]close紧扣的掌心\n[02:42.480]统一的心率连着呼吸\n[02:45.540]我的耳朵快要忘记（你的声音）`;
    
53. getAr(lrc);
    
54. </script>

复制代码

帖子代码没什么特别的，主要是 -webkit-background-clip: text; 下文本阴影的设置，借助 filter: drop-shadow(); 属性实现。

南无月

这个在昨天基础上加了视频，但是视频没有参与控制。。整贴颜色特别好看，歌曲好听，深情款款，娓娓道来的样子。。

南无月

马黑黑 发表于 2024-6-19 12:30
帖子代码
帖子代码没什么特别的，主要是 -webkit-background-clip: text; 下文本阴影的设置，借助 filter: ...

这个青色阴影使得歌词与背景更加协调，非常柔和的效果。这也是个小妙招

马黑黑

南无月 发表于 2024-6-19 12:53
这个青色阴影使得歌词与背景更加协调，非常柔和的效果。这也是个小妙招

阴影颜色也是讲究的，还有它的模糊半径。如果再用上转色相滤镜，还需要考虑滤镜的前后关系。

马黑黑

南无月 发表于 2024-6-19 12:52
这个在昨天基础上加了视频，但是视频没有参与控制。。整贴颜色特别好看，歌曲好听，深情款款，娓娓道来的 ...

视频参与控制的时候，需要额外做处理，比如给它加个覆盖元素、透过该元素来接受点击操作。这会有额外的代码，有时候不想让代码太多。

梦江南

欣赏学习老师的精彩音画！向老师致敬！

红影

右上角的原来是视频，开始还以为是动图呢。
黑黑什么别致的视频都能找到，我也总往熊猫跑，就没看到这么多好玩的视频

红影

歌曲好听，歌词阴影特别漂亮。看了黑黑几个漂亮的歌词文字的修饰了，都好漂亮

红影

播放器按钮的阴影设计也漂亮。细节能给人带来很多奇妙的感受

马黑黑

红影 发表于 2024-6-19 16:07
播放器按钮的阴影设计也漂亮。细节能给人带来很多奇妙的感受

细节也是重要的

马黑黑

梦江南 发表于 2024-6-19 14:05
欣赏学习老师的精彩音画！向老师致敬！

马黑黑

红影 发表于 2024-6-19 16:04
歌曲好听，歌词阴影特别漂亮。看了黑黑几个漂亮的歌词文字的修饰了，都好漂亮

这些，先弄懂基础：

color: transparent;
-webkit-background-clip: text;

酱紫呢，背景就显示在了文本上。

由于文本前景色透明，所以，如果简单地使用属性 text-shadow: 1px 1px 2px gray; 修饰文本阴影，阴影所设置的颜色直接入侵文本主体，背景色显示在文本上的状态深受影响甚至被取代。所以，要使用滤镜属性 filter: drop-shadow(1px 1px 2px gray); 来实现阴影。

南无月

马黑黑 发表于 2024-6-19 13:02
阴影颜色也是讲究的，还有它的模糊半径。如果再用上转色相滤镜，还需要考虑滤镜的前后关系。

好哒，反正阴影不是随意加的。
就像上次我的歌词不显，老师给个方案一下子就有效果了。。
这个阴影也有大学问。。

转色相滤镜，还需要考虑滤镜的前后关系
这个前后关系是指内阴影和外阴影么？

南无月

马黑黑 发表于 2024-6-19 13:03
视频参与控制的时候，需要额外做处理，比如给它加个覆盖元素、透过该元素来接受点击操作。这会有额外的代 ...

我说的不是这让视频当小播，而是小播控制视频暂停。
毕竟习惯了点小播控制所有的动态暂停
试了下用之前的知识就可以解决。

马黑黑

南无月 发表于 2024-6-19 18:03
好哒，反正阴影不是随意加的。
就像上次我的歌词不显，老师给个方案一下子就有效果了。。
这个阴影也有 ...

这些靠说说明白不了，自己做过尝试，慢慢能理解

马黑黑

南无月 发表于 2024-6-19 18:05
我说的不是这让视频当小播，而是小播控制视频暂停。
毕竟习惯了点小播控制所有的动态暂停
试了下用之前 ...

不过要尽可能有机整合。比如好端端的 mState() 函数你不用，还去整一个单击事件来管理视频，没必要

南无月

马黑黑 发表于 2024-6-19 18:05
这些靠说说明白不了，自己做过尝试，慢慢能理解

刚跟了一贴，我做贴慢要顾得太多，阴影这块还要慢慢细看。
刚好发不出来，明天调调再说。

南无月

马黑黑 发表于 2024-6-19 18:06
不过要尽可能有机整合。比如好端端的 mState() 函数你不用，还去整一个单击事件来管理视频，没必要

好哒，我正在尽量得满头大汗。。
就是整出来，编辑器里可以，发贴预览一切正常。。发出来就没了。。
我有点晕

马黑黑

南无月 发表于 2024-6-19 22:49
好哒，我正在尽量得满头大汗。。
就是整出来，编辑器里可以，发贴预览一切正常。。发出来就没了。。
我 ...

逻辑要清晰