学习亚伦老师代码《歌曲：我爱你勐巴拉娜西》

老谟深虑

咕咚来了 发表于 2025-2-15 12:03
看到我截图的那些代码了吧，好像代码不对……

       代码都是亚伦老师的源代码，我是用他的源代码制作的。到咱论坛就的修改代码，才能正常。咱不会修改呀。

老谟深虑

咕咚来了 发表于 2025-2-15 12:03
看到我截图的那些代码了吧，好像代码不对……

1. <br /><br /><style type="text/css">
   
2. #papa { margin: 140px 0 20px calc(50% - 621px); background:url('') no-repeat center/cover;width: 1200px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
   
3. 
   
4. #bjbs{animation: rotating 1s linear infinite;width: 1200px; height: 700px;position: absolute;background:url('https://cccimg.com/view.php/2d3863701fe582cb565664e92423ae92.jpg')no-repeat center/cover;}
   
5. @keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
   
6. 
   
7. #mplayer {z-index: 8;
   
8.         position: absolute;
   
9.         left:90px;
   
10.         bottom: 20px;
    
11.         width: 40px;
    
12.         height: 40px;
    
13. opacity: 1;
    
14.         transition: .2s;
    
15.        
    
16.         place-items: center;
    
17.         --disp1: 0; --disp2: 1;
    
18. }
    
19. #mplayer::before , #mplayer::after{
    
20.         position: absolute;
    
21.         content: '';
    
22. cursor: pointer;
    
23.         transition: .2s;
    
24. }
    
25. #mplayer::before {
    
26.         width: 40px;
    
27.         height: 40px;opacity: 1;
    
28.         background: url("https://pic.imgdb.cn/item/666469465e6d1bfa05bd07ea.png") no-repeat center/cover;
    
29.         opacity: var(--disp1);
    
30. }
    
31. #mplayer::after {
    
32.         width: 40px;
    
33.         height: 40px;opacity: 1;
    
34.         background: url("https://pic.imgdb.cn/item/6664693a5e6d1bfa05bcf7d3.png")no-repeat center/cover;
    
35.         opacity: var(--disp2);
    
36. }
    
37. 
    
38. #tmsg {position: absolute;z-index: 8;
    
39.         font: normal 12px sans-serif;
    
40.         color: #ffffff;
    
41.          bottom: 30px;
    
42.         left:87%;}
    
43. #prog {position: absolute;z-index: 8;
    
44.         width: 70%;
    
45.         height: 1.5px;
    
46.         cursor: pointer;
    
47.          bottom: 35px;
    
48. left:16%;
    
49. border-radius: 1px;}
    
50. 
    
51. #bt_prev{position: absolute;z-index: 8;
    
52.         width:30px;
    
53.         height: 30px;
    
54. bottom: 24px;left:40px;
    
55.         background: url("https://pic.imgdb.cn/item/6664695c5e6d1bfa05bd23cb.png")no-repeat center/cover;}
    
56. #bt_pnev{position: absolute;z-index: 8;
    
57.         width:30px;
    
58.         height: 30px;
    
59. bottom: 24px;left:150px;
    
60.         background: url("https://pic.imgdb.cn/item/66651ae45e6d1bfa0552bf2a.png")no-repeat center/cover;}
    
61. #lb{ position: absolute; bottom: 30px;right:52px; width: 22px; height: 20px;z-index: 8; }
    
62. #lb img{ width: 100%; height: 100%;  }
    
63. 
    
64. .first{
    
65.   left:100px;background:url("https://cccimg.com/view.php/c349538ab1e54e665470288cc0cfea2f.jpg")no-repeat center/cover;
    
66.    animation: breath  3s  infinite  linear;
    
67. }
    
68. .second{
    
69.   left:300px;background:url("https://cccimg.com/view.php/2a821671bfad68b2a7874d62670638ef.jpg")no-repeat center/cover;
    
70.    animation: breath  3s  0.25s infinite  linear;
    
71. }
    
72. .third{
    
73.   left:500px;background:url("https://cccimg.com/view.php/768e147464e634d6a1305de40e6f9e4b.jpg")no-repeat center/cover;
    
74.    animation: breath  3s 0.5s infinite  linear;
    
75. }
    
76. .forth{
    
77.   left:700px;background:url("https://cccimg.com/view.php/0c398f295f933b023a41b1ee0ab02ccf.jpg")no-repeat center/cover;
    
78.   animation: breath  3s 0.75s infinite  linear;
    
79. }
    
80. .morex{
    
81.   left:900px;background:url("https://cccimg.com/view.php/519a8dcb28b452ad53c1c8a866746d6f.jpg")no-repeat center/cover;
    
82.   animation: breath  3s 1s infinite  linear;
    
83. }
    
84. 
    
85. .stop .first,
    
86. .stop .second,
    
87. .stop .third,
    
88. .stop .forth,  
    
89. .stop .morex{animation-play-state: paused;}
    
90. .ball{
    
91.   position:absolute;
    
92.   top:0;
    
93.   bottom:0;  border-radius: 4px;
    
94.   margin:auto; box-shadow: 0px 0px 0px 4px #800000 inset,0px 0px 0px 5px #fff inset;
    
95.   width:140px;
    
96.   height:250px;
    
97. }
    
98. 
    
99. @keyframes breath{
    
100.   0%{
     
101.      transform:scale(0.6);
     
102.    
     
103.     opacity:1;transform-timing-function:linear;
     
104.    
     
105.   }
     
106.   25%{
     
107.      transform:scale(0.8);
     
108.    
     
109.     opacity:1;
     
110.     transform-timing-function:linear;
     
111.   }
     
112.   50%{
     
113.      transform:scale(1);
     
114.    
     
115.     opacity:1;
     
116.     transform-timing-function:linear;
     
117.   }
     
118.   75%{
     
119.      transform:scale(1.2);
     
120. 
     
121.     opacity:1;
     
122.     transform-timing-function:ease-out;
     
123.   }
     
124.   100%{
     
125.      transform:scale(1.4);
     
126.   
     
127.     opacity:.4;
     
128.     transform-timing-function:ease-out;
     
129.   }
     
130. }
     
131. 
     
132. 
     
133. .cont {position: absolute;z-index: 2;
     
134.   width: 0;
     
135.   height: 0;
     
136. 
     
137.   top: 20%;
     
138.   left: 40%;
     
139.   perspective: 420px;
     
140.   perspective-origin: center -150px;
     
141. }
     
142. 
     
143. .bird {
     
144.   width: 0;
     
145.   height: 30px;
     
146.   position: absolute;
     
147.   top: 50%;
     
148.   left: 50%;
     
149.   animation: bird 15s infinite linear;
     
150. }
     
151. 
     
152. .bird:nth-child(2) {
     
153.   animation-delay: -5s;
     
154. }
     
155. .bird:nth-child(3) {
     
156.   animation-delay: -10s;
     
157. }
     
158. .stop .bird::before,
     
159. .stop .bird::after{animation-play-state: paused;}
     
160. .stop .bird,
     
161. .stop .bird:nth-child(2),
     
162. .stop .bird:nth-child(3){animation-play-state: paused;}
     
163. 
     
164. @keyframes bird {
     
165.   from {
     
166.     transform: translate(-50%, -50%) rotateY(0deg) translate3d(150px, 0, 0);
     
167.   }
     
168.   to {
     
169.     transform: translate(-50%, -50%) rotateY(-360deg) translate3d(150px, 0, 0);
     
170.   }
     
171. }
     
172. .bird::before, .bird::after {
     
173.   content: "";
     
174.   width: 50px;
     
175.   height: 30px;
     
176.   position: absolute;
     
177.   top: 0;
     
178.   border: 0 solid;
     
179.   border-top: 5px solid #aaa;
     
180.   animation: 1s infinite ease-in-out;
     
181. }
     
182. .bird::before {
     
183.   right: -3px;
     
184.   animation-name: wing-b;
     
185. }
     
186. @keyframes wing-b {
     
187.   0%, 100% {
     
188.     border-radius: 10% 100%;
     
189.   }
     
190.   33% {
     
191.     border-radius: 50% 100%;
     
192.   }
     
193. }
     
194. .bird::after {
     
195.   left: -3px;
     
196.   animation-name: wing-a;
     
197. }
     
198. @keyframes wing-a {
     
199.   0%, 100% {
     
200.     border-radius: 100% 10%;
     
201.   }
     
202.   33% {
     
203.     border-radius: 100% 50%;
     
204.   }
     
205. }
     
206. 
     
207. </style>
     
208. 
     
209. 
     
210. 
     
211. <div id="papa">
     
212. <div id="bjbs"> </div>
     
213. <div id="tnpmImg">
     
214. <div class="cont"  >
     
215. <div class="bird"></div>
     
216.   <div class="bird"></div>
     
217.   <div class="bird"></div>
     
218. </div>
     
219. </div>
     
220. <div id="testImg">
     
221. <div class="ball first"></div>
     
222. <div class="ball second"></div>
     
223. <div class="ball third"></div>
     
224. <div class="ball forth"></div>
     
225. <div class="ball morex"></div>
     
226. </div>
     
227. <div id="tmsg">00:00 | 00:00</div>
     
228. 
     
229. <div id="prog" title="播放进度条"></div>
     
230. 
     
231. <div id="bt_prev" title="无效"></div>
     
232. 
     
233. <div id="bt_pnev" title="无效"></div>
     
234. 
     
235. <div id="lb" title="喇叭"><img alt="" id="lbImg" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" /></div>
     
236. 
     
237. <div id="mplayer" title="暂停/播放"></div>
     
238. 
     
239. <div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
     
240. </div>
     
241. <audio autoplay="" id="aud" loop="" src="https://cccimg.com/view.php/5960de26e84caf023b6d9d65324a95b5.mp3">&nbsp;</audio>
     
242. 
     
243. <style type="text/css">#lrc {
     
244.         --state: paused;
     
245.         --motion: cover2;
     
246.         --tt: 2s;
     
247.         --bg: linear-gra**nt(180deg, #880000, #880000);
     
248.         position: absolute;z-index: 6;
     
249.         left: 40%;
     
250.         transform: translate(-50%);
     
251.         top: 72%;
     
252.         font:normal 3em 华文隶书;
     
253.         color: #0000;
     
254.         white-space: pre; transform: perspective(120px) rotateY(20deg);
     
255.         -webkit-background-clip: text;
     
256.         filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px  0);
     
257. }
     
258. #lrc::before {
     
259.         position: absolute;
     
260.         content: attr(data-lrc);
     
261.         width: 20%;
     
262.         height: 100%;
     
263.         color: transparent;
     
264.         overflow: hidden;
     
265.         white-space: pre;
     
266.         background: var(--bg);
     
267.        
     
268.         -webkit-background-clip: text;
     
269.         animation: var(--motion) var(--tt) linear forwards;
     
270.         animation-play-state: var(--state);
     
271. }
     
272. @keyframes cover1 { from { width: 0; } to { width: 100%;} }
     
273. @keyframes cover2  { from { width: 0; } to { width: 100%;} }
     
274. </style>
     
275. <script >
     
276. (function() {
     
277. /*原始lrc歌词*/
     
278. let lrcStr = `[00:00.000]我爱你勐巴拉娜西
     
279. [00:10.350]演唱：亮剑袁雪儿
     
280. [00:20.350]LRC：老谟深虑
     
281. [00:32.700]你是一杯甘甜的美酒
     
282. [00:41.970]醉了蓝天醉了那白云
     
283. [00:49.500]醉了太阳醉了月亮
     
284. [00:57.000]醉了丛林醉了那山冈
     
285. [01:06.390]飘来了辽崖山的彩铃
     
286. [01:10.170]飘来了羁落山的欢乐
     
287. [01:13.920]飘来了布拉山的花香
     
288. [01:17.700]飘来了待牵人的清幽
     
289. [01:22.350]喔我爱你哟勐巴拉娜西
     
290. [01:31.020]我爱你哟勐巴拉娜西
     
291. [01:40.590]风华花开千万朵
     
292. [01:43.890]野桂花下飘万里
     
293. [01:48.150]孔雀飞向在明天
     
294. [01:51.420]就像飞水撒满天
     
295. [02:27.060]你是一朵期盼的蓓蕾
     
296. [02:36.420]醉了神力的风醉了那班子的云
     
297. [02:43.920]醉了江河的水醉了那明朗的月
     
298. [02:51.420]醉了阿布朗的情醉了那萨朵里的爱
     
299. [03:00.810]美丽富饶的地方
     
300. [03:04.560]人间幸福的天堂
     
301. [03:08.190]神奇美丽的家园
     
302. [03:12.030]人人向往的胜地
     
303. [03:16.710]喔我爱你哟勐巴拉娜西
     
304. [03:25.440]我爱你哟勐巴拉娜西
     
305. [03:32.790]你是一颗神奇的绿宝石
     
306. [03:38.250]镶嵌在那绿海里
     
307. [03:42.480]你是一颗璀璨的夜明珠
     
308. [03:45.810]闪烁在那花丛中
     
309. [03:47.790]喔我爱你哟勐巴拉娜西
     
310. [03:59.160]我爱你哟勐巴拉娜西
     
311. [04:08.760]你是一颗神奇的绿宝石
     
312. [04:12.060]匿舵寐避穿五洲
     
313. [04:16.260]你是一颗璀璨的夜明珠
     
314. [04:19.620]名扬四海闯天下
     
315. [04:25.170]喔我爱你喔勐巴拉娜西
     
316. [04:40.080]喔我爱你喔勐巴拉娜西
     
317. `;
     
318. 
     
319. /*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
     
320. let mKey = 0, mFlag = true, averAdd = 0.3;
     
321. 
     
322. /*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
     
323. let lrcTime = (ar) => {
     
324.         let tmpAr = [];
     
325.         for(j = 0; j <ar.length - 1; j ++) {
     
326.                 if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
     
327.         }
     
328.         let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
     
329.         tmpAr.push(aver);
     
330.         tmpAr.forEach((item,key) => {
     
331.                 ar[key][2] = item > aver ? aver : item;
     
332.         });
     
333.         return ar;
     
334. };
     
335. 
     
336. /*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
     
337. let getLrcAr = (text) => {
     
338.         let lrcAr = [];
     
339.         let calcRule = [60,1,0.001];
     
340.         for(x of text.split('\n')) {
     
341.                 let ar = [];
     
342.                 let re = /\d+[\.:]\d+([\.:]\d+)?/g;
     
343.                 let geci = x.replace(re,'');
     
344.                 if(geci) {
     
345.                         geci = geci.replace(/[\[\]\'"\t,]s?/g,'');
     
346.                         let time = x.match(re);
     
347.                         if(time != null) {
     
348.                                 for(y of time) {
     
349.                                         let tmp = y.match(/\d+/g);
     
350.                                         let sec = 0;
     
351.                                         for(z in tmp) sec += tmp[z] * calcRule[z];
     
352.                                         ar[0] = [parseFloat(sec.toFixed(2)), geci];
     
353.                                         lrcAr.push(ar[0]);
     
354.                                 }
     
355.                         }
     
356.                 }
     
357.         }
     
358.         lrcAr.sort((a,b)=> a[0] - b[0]);
     
359.         return(lrcTime(lrcAr));
     
360. };
     
361. 
     
362. /*函数 ：模拟显示同步歌词*/
     
363. let showLrc = (time) => {
     
364.         let name = mFlag ? 'cover1' : 'cover2';
     
365.         lrc.innerHTML = lrcAr[mKey][1];
     
366.         lrc.dataset.lrc = lrcAr[mKey][1];
     
367.         lrc.style.setProperty('--motion', name);
     
368.         lrc.style.setProperty('--tt', time + 's');
     
369.         lrc.style.setProperty('--state', 'running');
     
370.         mKey += 1;
     
371.         mFlag = !mFlag;
     
372. };
     
373. 
     
374. /*函数 ：处理当前歌词索引 mKey*/
     
375. let calcKey = () => {
     
376.         for (j = 0; j < lrcAr.length; j++) {
     
377.                 if (aud.currentTime <= lrcAr[j][0]) {
     
378.                         mKey = j - 1;
     
379.                         break;
     
380.                 }
     
381.         }
     
382.         if (mKey < 0) mKey = 0;
     
383.         if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
     
384.         let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
     
385.         showLrc(time);
     
386. };
     
387. 
     
388. /*格式化时间信息*/
     
389. let toMin = (val) => {
     
390.         if (!val) return '00:00';
     
391.         val = Math.floor(val);
     
392.         let min = parseInt(val / 60),
     
393.         sec = parseFloat(val % 60);
     
394.         if (min < 10) min = '0' + min;
     
395.         if (sec < 10) sec = '0' + sec;
     
396.         return min + ':' + sec;
     
397. }
     
398. 
     
399. /*函数 ：关键帧动画状态切换*/
     
400. let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
     
401. 
     
402. /*监听播放进度*/
     
403. aud.addEventListener('timeupdate', () => {
     
404.         for (j = 0; j < lrcAr.length; j++) {
     
405.                 if (aud.currentTime >= lrcAr[j][0]) {
     
406.                         cKey = j;
     
407.                         if (mKey === j) showLrc(lrcAr[j][2]);
     
408.                         else continue;
     
409.                 }
     
410.         }
     
411. });
     
412. aud.addEventListener('pause', () => mState());/*监听暂停事件*/
     
413. aud.addEventListener('play', () => mState());/*监听播放事件*/
     
414. aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
     
415. let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
     
416. })();
     
417. 
     
418. </script>
     
419. <script>
     
420. let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
     
421. mplayer.onclick =function() { aud.paused ?(aud.play(),imagelb.play()): ( aud.pause(),imagelb.stop())};
     
422. aud.addEventListener('play', () => mState());
     
423. aud.addEventListener('pause', () => mState());
     
424. var imagelb= document.getElementById("lbImg");
     
425. 
     
426. (function(){
     
427. var image = document.getElementById("testImg");var image0 = document.getElementById("tnpmImg");
     
428. let mState = () => aud.paused ? (image.classList.add('stop'),image0.classList.add('stop')):(image.classList.remove('stop'),image0.classList.remove('stop'));
     
429. aud.addEventListener('play', () => mState());
     
430. aud.addEventListener('pause', () => mState());
     
431. })();
     
432. bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
     
433. aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
     
434. aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
     
435. 
     
436. 
     
437. /*进度条 进度时间*/
     
438. prog.onclick = (e) => {
     
439.                 aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
     
440.         }
     
441. aud.addEventListener('timeupdate', () => {
     
442.                aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gra**nt(90deg, #ff0000, #ff0000, #ff0000 '+ aud.currentTime / aud.duration * 100 + '%, #eeeeee 0)';});
     
443.                 tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
     
444. 
     
445.         });
     
446. let toMin = (val) => {
     
447.                 if (!val) return '00:00';
     
448.                 val = Math.floor(val);
     
449.                 let min = parseInt(val / 60),
     
450.                         sec = parseFloat(val % 60);
     
451.                 if (min < 10) min = '0' + min;
     
452.                 if (sec < 10) sec = '0' + sec;
     
453.                 return min + ':' + sec;
     
454.         };
     
455. /*结束*/
     
456. </script>
     
457. <script>
     
458. /*以下是控制动图的插件*/
     
459. if ('getContext' in document.createElement('canvas')) {
     
460.     HTMLImageElement.prototype.play = function() {
     
461.         if (this.storeCanvas) {
     
462.             // 移除存储的canvas
     
463.             this.storeCanvas.parentElement.removeChild(this.storeCanvas);
     
464.             this.storeCanvas = null;
     
465.             // 透明度还原
     
466.             imagelb.style.opacity = '';
     
467.         }
     
468.         if (this.storeUrl) {
     
469.             this.src = this.storeUrl;   
     
470.         }
     
471.     };
     
472.     HTMLImageElement.prototype.stop = function() {
     
473.         var canvas = document.createElement('canvas');
     
474.         // 尺寸
     
475.         var width = this.width, height = this.height;
     
476.         if (width && height) {
     
477.             // 存储之前的地址
     
478.             if (!this.storeUrl) {
     
479.                 this.storeUrl = this.src;
     
480.             }
     
481.             // canvas大小
     
482.             canvas.width = width;
     
483.             canvas.height = height;
     
484.             // 绘制图片帧（第一帧）
     
485.             canvas.getContext('2d').drawImage(this, 0, 0, width, height);
     
486.             // 重置当前图片
     
487.             try {
     
488.                 this.src = canvas.toDataURL("image/gif");
     
489.             } catch(e) {
     
490.                 // 跨域
     
491.                 this.removeAttribute('src');
     
492.                 // 载入canvas元素
     
493.                 canvas.style.position = 'absolute';
     
494.                 // 前面插入图片
     
495.                 this.parentElement.insertBefore(canvas, this);
     
496.                 // 隐藏原图
     
497.                 this.style.opacity = '0';
     
498.                 // 存储canvas
     
499.                 this.storeCanvas = canvas;
     
500.             }
     
501.         }
     
502.     };
     
503. }
     
504. 
     
505. </script>

复制代码

武朝歌

老谟深虑 发表于 2025-2-15 11:54
你是啥浏览器？

360浏览器

老谟深虑

武朝歌 发表于 2025-2-15 12:45
360浏览器

       看来只有360浏览器能听到声音。

丁香

出大错了老乡，没有声音。

老谟深虑

丁香 发表于 2025-2-15 12:53
出大错了老乡，没有声音。

       对的，有人能听到，有人听不到。没办法了。

武朝歌

老谟深虑 发表于 2025-2-15 12:50
看来只有360浏览器能听到声音。

我现在用了搜狗也可以听到音乐。

春妮

欣赏您精心编辑的优美音画，听到《我爱你勐巴拉娜西》这首歌，我感觉就像是被带到了一个遥远而又神秘的地方，歌曲里的旋律和歌词都充满了浓郁的民族风情，让人仿佛能感受到那片美丽土地的魅力。欣赏老谟超版佳作，我也忍不住想要跟着歌曲一起舞蹈，感受那份热烈和欢快！点赞！学习！
温馨提示：请朋友们转换浏览器，用360能够听到声音，很动听的一首歌，非常喜欢！

西湖

老谟深虑 发表于 2025-2-15 11:16
不用安360了。

好！

西湖

武朝歌 发表于 2025-2-15 11:38
360浏览器事儿多。

对！不敢安装！