宿命

马黑黑

花潮lrc在线

00:00

00:00

马黑黑

参考代码（全）

1. <style>
   
2. #papa {
   
3.         --state: paused;
   
4.         margin: auto;
   
5.         width: 1262px;
   
6.         height: 710px;
   
7.         background: #666 url('https://638183.freep.cn/638183/t22/webp/sumk.webp') no-repeat center/cover;
   
8.         box-shadow: 3px 3px 20px #000;
   
9.         display: grid;
   
10.         place-items: center;
    
11.         opacity: .95;
    
12.         position: relative;
    
13.         z-index: 1;
    
14. }
    
15. 
    
16. #papa::before {
    
17.         position: absolute;
    
18.         content: '';
    
19.         left: 0;
    
20.         top: 0;
    
21.         bottom: 0;
    
22.         right: 0;
    
23.         background: #000;
    
24.         opacity: .0;
    
25.         animation: darker linear 1.2s infinite alternate;
    
26.         transition: all 1.2s;
    
27.         animation-play-state: var(--state);
    
28. }
    
29. 
    
30. #mplayer {
    
31.         position: absolute;
    
32.         display: grid;
    
33.         grid-template-areas: 'cur btnplay dur''prog prog prog';
    
34.         gap: 4px;
    
35.         place-items: end center;
    
36.         font-size: 14px;
    
37.         bottom: 20px;
    
38. }
    
39. 
    
40. #cur {
    
41.         grid-area: cur;
    
42.         color: snow;
    
43. }
    
44. 
    
45. #dur {
    
46.         grid-area: dur;
    
47.         color: snow;
    
48. }
    
49. 
    
50. #btnplay {
    
51.         grid-area: btnplay;
    
52.         display: grid;
    
53.         grid-auto-flow: column;
    
54.         place-items: end center;
    
55.         gap: 0 4px;
    
56.         height: 60px;
    
57.         cursor: pointer;
    
58. }
    
59. 
    
60. #btnplay>span {
    
61.         background: red;
    
62.         width: 4px;
    
63.         transition: .6s;
    
64.         opacity: .95;
    
65. }
    
66. 
    
67. #prog {
    
68.         --ww: 0px;
    
69.         grid-area: prog;
    
70.         width: 300px;
    
71.         height: 12px;
    
72.         border-radius: 6px;
    
73.         background: snow;
    
74.         opacity: .65;
    
75.         cursor: pointer;
    
76.         position: relative;
    
77. }
    
78. 
    
79. #prog::before {
    
80.         position: absolute;
    
81.         content: '';
    
82.         width: var(--ww);
    
83.         height: 12px;
    
84.         border-radius: 6px;
    
85.         background: snow linear-gradient(90deg, green, red);
    
86.         opacity: .65;
    
87. }
    
88. 
    
89. #lrc {
    
90.         --motion: cover1;
    
91.         --tt: 5s;
    
92.         position: absolute;
    
93.         top: 20px;
    
94.         font: bold 2.4em sans-serif;
    
95.         color: hsl(0, 10%, 90%);
    
96.         -webkit-background-clip: text;
    
97.         filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
    
98. }
    
99. 
    
100. #lrc::before {
     
101.         position: absolute;
     
102.         content: attr(data-lrc);
     
103.         width: 20%;
     
104.         height: 100%;
     
105.         color: transparent;
     
106.         overflow: hidden;
     
107.         white-space: nowrap;
     
108.         background: linear-gradient(180deg, hsla(60, 0%, 0%, .45), hsla(60, 100%, 50%, .75));
     
109.         filter: inherit;
     
110.         -webkit-background-clip: text;
     
111.         animation: var(--motion) var(--tt) linear forwards;
     
112.         animation-play-state: var(--state);
     
113. }
     
114. 
     
115. @keyframes cover1 {
     
116.         from { width: 0; }
     
117.         to { width: 100%; }
     
118. }
     
119. 
     
120. @keyframes cover2 {
     
121.         from { width: 0; }
     
122.         to { width: 100%; }
     
123. }
     
124. 
     
125. @keyframes darker {
     
126.         from { opacity: 0; }
     
127. 
     
128.         to { opacity: .45; }
     
129. }
     
130. </style>
     
131. 
     
132. <div id="papa">
     
133.         <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
     
134.         <div id="mplayer">
     
135.                 <div id="cur">00:00</div>
     
136.                 <div id="btnplay"></div>
     
137.                 <div id="dur">00:00</div>
     
138.                 <div id="prog"></div>
     
139.         </div>
     
140.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1968070479.mp3" loop autoplay></audio>
     
141. </div>
     
142. 
     
143. <script>
     
144. (function() {
     
145.         let mKey = 0,
     
146.                 mFlag = true;
     
147.         let lrcAr = [
     
148.                 [0.1, "宿命", 21.3],
     
149.                 [21.39, "演唱：祁松涛", 11.0],
     
150.                 [32.4, "雨不知花开", 5.6],
     
151.                 [39.57, "宿命是寂寞", 5.8],
     
152.                 [45.96, "撒满晚秋摇曳的一瞬间", 6.1],
     
153.                 [53.19, "起舞后只等凋落", 7.7],
     
154.                 [63.24, "夜不知烟火", 5.8],
     
155.                 [70.44, "失去的自我", 6.3],
     
156.                 [76.86, "遥上星空灿烂的那一刻", 6.4],
     
157.                 [84.12, "或许在等谁记得", 8.2],
     
158.                 [93.24, "我将时间上锁留住蹉跎", 8.0],
     
159.                 [101.49, "把一生都交给你去挥霍", 6.0],
     
160.                 [107.85, "等白发苍苍时再听你说", 8.0],
     
161.                 [115.95, "这一遭你不后悔曾走过", 5.7],
     
162.                 [124.14, "我将爱的轮廓布满星河", 7.8],
     
163.                 [132.24, "数不清我的思念有几颗", 6.0],
     
164.                 [138.72, "就算有一天我不再闪烁", 7.8],
     
165.                 [146.91, "拼了命此生只为你而活", 6.2],
     
166.                 [186, "我将时间上锁留住蹉跎", 7.6],
     
167.                 [194.22, "把一生都交给你去挥霍", 5.8],
     
168.                 [200.49, "等白发苍苍时再听你说", 8.0],
     
169.                 [208.68, "这一遭你不后悔曾走过", 6.3],
     
170.                 [216.87, "我将爱的轮廓布满星河", 7.6],
     
171.                 [225, "数不清我的思念有几颗", 6.2],
     
172.                 [231.39, "就算有一天我不再闪烁", 7.7],
     
173.                 [239.58, "拼了命此生只为你而活", 6.1],
     
174.                 [246.96, "拼了命此生只为你而活", 11.3]
     
175.         ];
     
176.         for (j = 0; j < 20; j++) {
     
177.                 let pinpu = document.createElement('span');
     
178.                 pinpu.className = 'pinpu';
     
179.                 pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
     
180.                 btnplay.appendChild(pinpu);
     
181.         }
     
182.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
     
183.         prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
     
184.         aud.addEventListener('seeked', () => calcKey());
     
185.         aud.addEventListener('pause', () => mState());
     
186.         aud.addEventListener('play', () => mState());
     
187.         aud.addEventListener('timeupdate', () => {
     
188.                 let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
     
189.                 prog.style.setProperty('--ww', prg + 'px');
     
190.                 cur.innerText = toMin(aud.currentTime);
     
191.                 dur.innerText = toMin(aud.duration);
     
192.                 setPinpu();
     
193.                 for (j = 0; j < lrcAr.length; j++) {
     
194.                         if (aud.currentTime >= lrcAr[j][0]) {
     
195.                                 cKey = j;
     
196.                                 if (mKey === j) showLrc(lrcAr[j][2]);
     
197.                                 else continue;
     
198.                         }
     
199.                 }
     
200.         });
     
201.         let calcKey = () => {
     
202.                 for (j = 0; j < lrcAr.length; j++) {
     
203.                         if (aud.currentTime <= lrcAr[j][0]) {
     
204.                                 mKey = j - 1;
     
205.                                 break;
     
206.                         }
     
207.                 }
     
208.                 if (mKey < 0) mKey = 0;
     
209.                 if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
210.                 let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
211.                 showLrc(time);
     
212.         };
     
213.         let showLrc = (time) => {
     
214.                 let name = mFlag ? 'cover1' : 'cover2';
     
215.                 lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];
     
216.                 lrc.style.setProperty('--motion', name);
     
217.                 lrc.style.setProperty('--tt', time + 's');
     
218.                 lrc.style.setProperty('--state', 'running');
     
219.                 mKey += 1;
     
220.                 mFlag = !mFlag;
     
221.         };
     
222.         let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), papa.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), papa.style.setProperty('--state', 'running'));
     
223.         let toMin = (val) => {
     
224.                 if (!val) return '00:00';
     
225.                 val = Math.floor(val);
     
226.                 let min = parseInt(val / 60),
     
227.                         sec = parseFloat(val % 60);
     
228.                 if (min < 10) min = '0' + min;
     
229.                 if (sec < 10) sec = '0' + sec;
     
230.                 return min + ':' + sec;
     
231.         };
     
232.         let setPinpu = () => {
     
233.                 let eles = document.querySelectorAll('.pinpu');
     
234.                 eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
     
235.         };
     
236. })();
     
237. </script>

复制代码

相约爱晚亭

欣赏精美音画佳作！

闲言不语

马黑新作，必须点赞！

马黑黑

醉美水芙蓉 发表于 2022-11-1 11:50
图片若隐若现，一闪一闪亮晶晶！很漂亮！

这是 #papa 的伪元素，它背景是深色的，覆盖整个主画面，然后设置透明度，并让透明度通过 animation 调用 @keyframes 关键帧动画，动画内容是令伪元素的透明度在一个幅度内来回变换。

马黑黑

醉美水芙蓉 发表于 2022-11-1 11:47
欣赏黑黑老师新帖，画面变色漂亮！

还行的吧

马黑黑

相约爱晚亭 发表于 2022-11-1 07:53
欣赏精美音画佳作！

感谢支持

马黑黑

闲言不语 发表于 2022-11-1 10:59
马黑新作，必须点赞！

非常感谢！

红影

虽然暂时看不到播放效果，但是觉得这个背景特别美。给黑黑点赞

马黑黑

红影 发表于 2022-11-1 13:00
虽然暂时看不到播放效果，但是觉得这个背景特别美。给黑黑点赞

小辣椒

黑黑这个教程代码写着（全），那我今天就做这个了

小辣椒

今天这个代码格式和前面几次分享的不一样，做一次实践一下

红影

马黑黑 发表于 2022-11-1 20:13

看到了，所有效果都能被暂停控制，真棒

红影

       left: 0;
        top: 0;
        bottom: 0;
        right: 0;

这个奇特，为什么这么设置？设个左和上以及宽高不可以么？

马黑黑

红影 发表于 2022-11-1 20:37
left: 0;
        top: 0;
        bottom: 0;

我记得说过一次的。这等同于：

left: 0; top: 0; width: 100%; height: 100%;

当子元素左上角为{0,0}，则，当其尺寸和父元素一致，那么，它的 right 和 bottom 值也都是0。

还有一个更绝妙的表示方法：

inset: 0;

inset: 0 等同于 left:0; top: 0; right: 0; bottom: 0;

又等同于：left: 0; top: 0; width: 100%; height: 100%


以上三种全覆盖父元素的子元素的设定的成立，建立在两个基础之上：① 父元素定位；② 子元素绝对定位

马黑黑

红影 发表于 2022-11-1 20:31
看到了，所有效果都能被暂停控制，真棒

还可以

马黑黑

小辣椒 发表于 2022-11-1 20:18
黑黑这个教程代码写着（全），那我今天就做这个了

俺啥时候的代码都是全的

马黑黑

小辣椒 发表于 2022-11-1 20:19
今天这个代码格式和前面几次分享的不一样，做一次实践一下

大同小异的