阿鲁卓玛 - 映山红

马黑黑

★ 花潮论坛lrc在线

马黑黑

代码

1. <style>
   
2. #papa { left: -214px; width: 1024px; height: 640px; background: teal url('https://638183.freep.cn/638183/t22/webp/ysh.webp') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
   
3. #btnplay { --dur: 10s; position: absolute; top: 30%; width: 40px; height: 40px; font: bold 40px/40px serif; text-align: center; color: red; cursor: pointer; animation: rot linear var(--dur) infinite; }
   
4. .mpic { position: absolute; left: 1024px; top: 60px; width: 120px; mix-blend-mode: multiply; animation: fly linear 40s infinite; }
   
5. #lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(0,100%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
   
6. #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
   
7. @keyframes cover1 { from { width: 0; } to { width: 100%; } }
   
8. @keyframes cover2 { from { width: 0; } to { width: 100%; } }
   
9. @keyframes rot { to { transform: rotate(360deg); } }
   
10. @keyframes fly { to { left: -120px; } }
    
11. </style>
    
12. 
    
13. <div id="papa">
    
14.         <img class="mpic" src="https://638183.freep.cn/638183/t22/hl/kite1.gif" alt="" />
    
15.         <span id="btnplay">★</span>
    
16.         <span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
    
17. </div>
    
18. <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2021/09/21/2926751e89bb5eeb059319bb807e62d0.mp3" autoplay= "autoplay"></audio>
    
19. 
    
20. <script>
    
21. (function() {
    
22.         let mKey = 0, mFlag = true, slip = 0.5;
    
23.         let lrcAr = [[0,"《映山红》",8.0],[8,"演唱：阿鲁阿卓",8.0],[18,"作词：陆柱国",7.0],[25,"作曲：傅庚辰",7.0],[34,"☆ 花潮LRC在线 ☆",8.0],[51.05,"夜半三更哟 盼天明",9.0],[60.04,"寒冬腊月哟 盼春风",9.0],[69.07,"若要盼得哟 红军来",9.0],[78.09,"岭上开遍哟 映山红",9.9],[88.03,"岭上开遍哟 映山红",9.0],[97.03,"岭上开遍哟 映山红",9.1],[127.06,"夜半三更哟 盼天明",9.0],[136.06,"寒冬腊月哟 盼春风",9.0],[145.08,"若要盼得哟 红军来",9.9],[155.01,"岭上开遍哟 映山红",8.0],[164.04,"若要盼得哟 红军来",9.0],[173.05,"岭上开遍哟 映山红",9.0],[182.09,"岭上开遍哟 映山红",9.0],[191.09,"岭上开遍哟 映山红",10.0],[222.01,"若要盼得哟 红军来",9.0],[231.01,"岭上开遍哟 映山红",9.0],[240.04,"岭上开遍哟 映山红",9.0],[249.04,"岭上开遍哟 映山红",10.0],[261.1,"岭上开遍哟 映山红",12.0],[274.09,"☆ 花潮LRC在线 ☆",2.9],[277,"☆ 感谢支持 ☆",6]];
    
24.         aud.loop = false;
    
25.         btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
26.         aud.addEventListener('pause', () => mState());
    
27.         aud.addEventListener('play', () => mState());
    
28.         aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
    
29.         aud.addEventListener('timeupdate', () => {
    
30.                 for (j = 0; j < lrcAr.length; j++) {
    
31.                         if (aud.currentTime - slip >= lrcAr[j][0]) {
    
32.                                 if (mKey === j) showLrc(lrcAr[j][2]);
    
33.                                 else continue;
    
34.                         }
    
35.                 }
    
36.         });
    
37.         let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
    
38.         let showLrc = (time) => {
    
39.                 let name = mFlag ? 'cover1' : 'cover2';
    
40.                 lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];
    
41.                 lrc.style.setProperty('--motion', name);
    
42.                 lrc.style.setProperty('--tt', time + 's');
    
43.                 lrc.style.setProperty('--state', 'running');
    
44.                 mKey += 1;
    
45.                 mFlag = !mFlag;
    
46.         };
    
47. })();
    
48. </script>
    

复制代码

马黑黑

这个没啥，试一下文本五角星做按钮。字体家族选 sans-serif 不理想，★不好绝对居中，改用 serif；sans-serif无衬线，类似黑体字效果，后者有衬线，类似楷体字效果。

歌词同步方面，未做微调，寻来的lrc歌词用空歌词做了标记，不太准但也勉强，转换后将空歌词删掉即可。爱歌词网对歌词的处理，好像都这么干。

红影

一进来就先看到了漂亮的风筝，飘飘荡荡的，很有趣。
这个五角星做按钮也好，正好跟歌曲的含义相配，红星代表着红军

红影

马黑黑 发表于 2022-10-10 09:00
这个没啥，试一下文本五角星做按钮。字体家族选 sans-serif 不理想，★不好绝对居中，改用 serif；sans-ser ...

寻来的lrc歌词用空歌词做了标记，转换后将空歌词删掉即可。
没看懂，这个是怎么玩的？

红影

歌词同步的颜色配得漂亮。在群山之上放一颗红星，很有些旷远的味道。无论用什么效果，和背景和歌曲都协调的就是美

梦缘

新的元素，感谢老师的精彩分享，欣赏问好！

小辣椒

黑黑，这个自己捣鼓按钮一定要代码制作吗？加图片链接可以吗

马黑黑

小辣椒 发表于 2022-10-10 12:05
黑黑，这个自己捣鼓按钮一定要代码制作吗？加图片链接可以吗

图片当然可以，但是还是要通过代码将图片放上去替代★，并且需要更改部分代码，如修改尺寸、前景色代码不要等。

马黑黑

红影 发表于 2022-10-10 09:13
寻来的lrc歌词用空歌词做了标记，转换后将空歌词删掉即可。
没看懂，这个是怎么玩的？

好像我说的是人话的吧

那里提供的lrc歌词，有很多行是空歌词的行，空行有起唱时间信息，它的意思就是上一句有歌词的唱到这里歌词唱完。

马黑黑

红影 发表于 2022-10-10 09:12
一进来就先看到了漂亮的风筝，飘飘荡荡的，很有趣。
这个五角星做按钮也好，正好跟歌曲的含义相配，红星代 ...

马黑黑

红影 发表于 2022-10-10 09:19
歌词同步的颜色配得漂亮。在群山之上放一颗红星，很有些旷远的味道。无论用什么效果，和背景和歌曲都协调的 ...

马黑黑

梦缘 发表于 2022-10-10 10:52
新的元素，感谢老师的精彩分享，欣赏问好！

小辣椒

马黑黑 发表于 2022-10-10 12:10
图片当然可以，但是还是要通过代码将图片放上去替代★，并且需要更改部分代码，如修改尺寸、前景色代码不 ...

哦~~~那就算了，昨天晚上弄到很迟，不会捣鼓，还有那个路径真的弄不好，本来想想直线上去很简单，就是弄不好，后来只得改道了，晚上上传后发了看看

马黑黑

小辣椒 发表于 2022-10-10 12:22
哦~~~那就算了，昨天晚上弄到很迟，不会捣鼓，还有那个路径真的弄不好，本来想想直线上去很简单，就是弄 ...

图片代码你会加就好办的：

① HTML代码：★删掉，用图片代码

② CSS根据图片大小修改一下红色部分的数值、蓝色的不要：

#btnplay {
        --dur: 10s;
        position: absolute;
        top: 30%;
        width: 40px;
        height: 40px;
        font: bold 40px/40px serif;
        text-align: center;
        color: red;
        cursor: pointer;
        animation: rot linear var(--dur) infinite;
}

马黑黑

小辣椒 发表于 2022-10-10 12:22
哦~~~那就算了，昨天晚上弄到很迟，不会捣鼓，还有那个路径真的弄不好，本来想想直线上去很简单，就是弄 ...

你不理解路径的语法，能弄好的话是靠运气

马黑黑

映山红就是杜鹃花，泛指各种红色的杜鹃花，是杜鹃的一种通俗叫法，植株属于落叶灌木，分枝多而纤细，叶片常集生枝端，花朵则簇生于枝顶，花梗较长，花色丰富艳丽，一般生长于海拔500-1200米的山地疏灌丛或松林下。

马黑黑

歌曲《映山红》是由陆柱国作词，傅庚辰作曲，邓玉华演唱的歌曲，亦是电影《闪闪的红星》的插曲，该曲创作于1974年  ，后收录在邓玉华于1998年10月26日发行的专辑《20世纪中华歌坛名人百集珍藏版》中  。

本帖歌曲演唱者阿鲁阿卓，应该是2016年的翻唱。

加林森

老歌新唱。有味道。

小辣椒

马黑黑 发表于 2022-10-10 12:50
你不理解路径的语法，能弄好的话是靠运气

我是瞎蒙的