学习亚伦老师代码-山妹子

娟子

蓝朵1111 发表于 2025-1-8 16:15
画面很美。清新淡雅。好听的歌。欣赏了！

谢谢兰朵姐姐精彩点评和热情支持鼓励！问好，祝您冬日安康！

娟子

咕咚来了 发表于 2025-1-8 16:24
时间主要花在审核上了！这才是难点！

知道老师在论坛责任重大工作很忙，您又是一个责任心很强的人，就更不容易了。天气进入最冷的季节，一定要多保重身体，切切！

娟子

庶民 发表于 2025-1-8 16:42
喜欢娟子的视频，清新美。

谢谢庶民老师精彩点评和热情支持鼓励！问好，祝您冬日安康！

咕咚来了

娟子 发表于 2025-1-8 18:57
知道老师在论坛责任重大工作很忙，您又是一个责任心很强的人，就更不容易了。天气进入最冷的季节，一定要 ...

身体的毛病是心肺功能下降，造成白天都想睡觉。春节后去医院看看是怎么回事。

娟子

起个网名好难 发表于 2025-1-8 16:43
画面很漂亮， 赞！

点击蝴蝶不能控制歌声启停。

谢谢难难老师精彩点评和热情支持鼓励！问好，祝您冬日安康！
是的，我这个蝴蝶不能控制启动，不如是哪里没做好？请老师指导，先谢谢了！

娟子

丁香 发表于 2025-1-8 17:47
欣赏佳作，下午好！

谢谢丁香热情支持鼓励！问好，祝您冬日安康！

起个网名好难

娟子 发表于 2025-1-8 19:11 谢谢难难老师精彩点评和热情支持鼓励！问好，祝您冬日安康！ 是的，我这个蝴蝶不能控制启动，不如是哪里 ...

1. <style>
2. #papa {
3. margin-top: 90px;
4. background: #800 url('https://cccimg.com/view.php/63a02594dcfad5585b2489aaf2be319f.jpg')no-repeat center/cover;
5. width: 1286px;
6. height: 720px;
7. box-shadow: 3px 3px 6px gray;
8. overflow: hidden;
9. position: absolute;
10. display: grid;
11. place-items: center;
12. left: 50%;
13. transform: translate(-50%);
14. }
16. #tz {
17. margin: 0px auto;
18. bottom: 20px;
19. width: 840px;
20. height: 300px;
21. border: 0px solid gray;
22. position: absolute;
23. }
25. #tz::before {
26. content: attr(data-lrc);
27. position: absolute;
28. bottom: 0;
29. margin: 0px 20px;
30. width: 100%;
31. height: 60px;
32. text-align: center;
33. font: 300 2.5em 华文隶书;
34. color: #880000;
35. filter: drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
36. }
38. #vid {
39. position: absolute;
40. width: 100% height: 100%;
41. object-fit: cover;
42. mix-blend-mode: lighten;
43. }
45. #mypic {
46. top: 42%;
47. right: 26%;
48. display: block;
49. position: absolute;
50. width: 100px;
51. height: 100px;
52. mix-blend-mode: difference;
53. background: url(https://files.superbed.cn/proxy/7569696d6e2732326a766d75726972337e7973337f7e787f726e337e7270322d2f297b2a257b2d7b2a2e2b7c7b7e2e2c2b24782a2e2e287c2e2c24787f7e297f2b29282c2f7e7f33776d7a.png)no-repeat center/1300px 100px;
54. animation: heart-burst steps(13) 2s infinite;
55. }
57. @keyframes heart-burst {
58. 0% {background-position: 0px 0; }
59. 100% { background-position: -1300px 0;}
60. }
61. </style>
62. <div id="papa">
63. <video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/97/V-139799-78BE6C44.mp4" autoplay loop muted></video>
64. <div id="tz" data-lrc="山 妹 子"></div>
65. <div id="mypic"></div>
66. </div>
67. <audio id="mAud" src=" http://music.163.com/song/media/outer/url?id=1813221258.mp3" autoplay loop></audio>
68. <div style="height: 920px;"></div>
69. <script>
70. {
71. let lrc = `[00:00.30]山 妹 子 - 歌手：李浩南
72. [00:10.00] 作词.作曲 : 野马
73. [00:20.00] LRC: 娟子
74. [00:30.16]巍巍梵净山
75. [00:36.64]深深的峡谷
76. [00:43.70]幽幽的森林
77. [00:50.44]清清的泉水
78. [00:53.50]叮咚流不停
79. [00:57.38]有位山姑娘
80. [01:04.27]放羊在那山岗
81. [01:11.14]幽幽的歌声
82. [01:17.83]顺着那泉水叮咚流淌
83. [01:24.93]叫一声山妹妹
84. [01:31.37]悠悠歌声为哪桩
85. [01:38.97]是否你和我一样
86. [01:45.73]孤独寂寞绕心房
87. [01:52.22]叫一声山妹妹
88. [01:59.31]别再忧伤别彷徨
89. [02:06.53]带上我那心爱的琴儿
90. [02:13.07]天天陪伴在你的身旁
91. [02:49.86]有位山姑娘
92. [02:57.47]放羊在那山岗
93. [03:04.29]幽幽的歌声
94. [03:10.88]顺着那泉水叮咚流淌
95. [03:17.96]叫一声山妹妹
96. [03:24.59]悠悠歌声为哪桩
97. [03:32.19]是否你和我一样
98. [03:38.87]孤独寂寞绕心房
99. [03:45.42]叫一声山妹妹
100. [03:52.38]别再忧伤别彷徨
101. [03:59.61]带上我那心爱的琴儿
102. [04:06.49]天天陪伴在你的身旁
103. [04:16.40]巍巍梵净山
104. [04:23.17]深深的峡谷
105. [04:29.99]幽幽的歌声
106. [04:36.64]顺着那泉水流淌
107. [04:58.35]
108. [05:00.50]
109. `;
110. let curkey = 0, lrcAr = [];
111. let getAr = (text) => {
112. let ar = text.trim().split('\n');
113. ar.sort();
114. let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
115. ar.forEach(item => {
116. let result = item.match(reg);
117. let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
118. lrcAr.push([tmsg, result[4].trim()]);
119. });
120. };
121. getAr(lrc);
122. let mState = () => {
123. mAud.paused ? (mypic.style.animationPlayState = "paused", vid.pause()) : (mypic.style.animationPlayState = "running", vid.play());
124. }
125. mAud.ontimeupdate = () => {
126. if (curkey > lrcAr.length - 1) return;
127. if (mAud.currentTime >= lrcAr[curkey][0]) {
128. tz.dataset.lrc = lrcAr[curkey][1];
129. curkey++;
130. }
131. };
132. mypic.onclick = () => mAud.paused ? mAud.play() : mAud.pause();
133. mAud.addEventListener('play', () => mState());
134. mAud.addEventListener('pause', () => mState());
135. mAud.play().catch(_ = () => mState());
136. }
137. </script>

复制代码

起个网名好难

娟子 发表于 2025-1-8 19:11
谢谢难难老师精彩点评和热情支持鼓励！问好，祝您冬日安康！
是的，我这个蝴蝶不能控制启动，不如是哪里 ...

调整了下代码已发出，但要等待审核…………

娟子

咕咚来了 发表于 2025-1-8 19:08
身体的毛病是心肺功能下降，造成白天都想睡觉。春节后去医院看看是怎么回事。 ...

睡眠太多也不正常啊，白天午觉也只能是短暂时间。是得去医院看看才行。

咕咚来了

娟子 发表于 2025-1-8 19:29
睡眠太多也不正常啊，白天午觉也只能是短暂时间。是得去医院看看才行。 ...

是的，要看医生了！