红梅赞

肖燕

沧海笑 发表于 2025-2-11 15:30
您把这些代码都发来给我看看。

<style>
.lrcShow{
        font:bold 2.5em 黑体;color:white;                /* 歌词字体、大小、背景颜色        */
        position:absolute;bottom:0px;left:20%;        /*        歌词的位置        */
        width:80%;height:1.5em;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;
}
.lrcShow::before{        /* 歌词动态前景色等，不熟悉就不要改动        */        
        position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;color:darkred
        background-image:linear-gradient(90deg,hsl(30,100%,25%),hsl(60,100%,50%),hsl(90,100%,75%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;
        animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);
}
@keyframes bgMove1{from{width:0;}to{width:100%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}

#oblk        {        /*        画面有关的设置        */
        overflow:hidden;border-radius:24px;width:1100px; height:510px;position:relative; left: 0px;
        box-shadow:3px 3px 20px black;background:url(https://pic1.imgdb.cn/item/6784e970d0e0a243d4f3ed0f.gif) no-repeat 0 0 /cover;
        font-size:15px; margin:90px 0 32px -300px;        /*        帖子字体的缺省设置、画面位置设置        */
}
/*        下面是帖子标题的有关设置        */                        
.descTitle{fill:transparent;stroke-width:2;stroke-dasharray:0 300;stroke-dashoffset:0;stroke:hsl(60,100%,40%);letter-spacing:1em;font-size:2.5em;animation:varstroke 20s ease-in-out infinite alternate;}
@keyframes varstroke{to{stroke-dashoffset:2000;stroke-dasharray:300 0;}
</style>

<div id="oblk">        <!--         画面背景        ---->

<!--         画面标题        ---->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 1000 558" id="svgadmin">
<text text-anchor="middle" x="52.5%" y="12.5%" class="descTitle"></text></svg>

<!--         LRC歌词显示        ---->
<div class="lrcShow" data-lrc="点击启动播放"></div>
</div>
<script>
document.write('<script type="text/javascript" src="http://cesholl.3vcn.work/scripts/lrcPlayerS.packed.js"><\/script>');
</script>
<script>
<!--
var lrctxt = `

{"sgc":false,"sfy":false,"qfy":false,"lrc":{"version":7,"lyric":"[00:00.00] 作词 : 王德\n[00:01.00] 作曲 : 刘锡津\n[00:16.59]我爱你塞北的雪\n[00:26.61]飘飘洒洒漫天遍野\n[00:36.10]你的舞姿是那样的轻盈\n[00:39.88]你的心地是那样的纯洁\n[00:44.88]你是春雨的亲姐妹哟\n[00:56.79]你是春天派出的使节\n[01:02.52]春天的使节\n[01:06.20]\n[01:19.26]我爱你塞北的雪\n[01:28.33]飘飘洒洒漫天遍野\n[01:37.92]你用白玉般的身躯\n[01:42.64]装扮银光闪闪的世界\n[01:48.12]你把生命溶进了土地哟\n[01:59.10]滋润着返青的麦苗迎春的花儿\n[02:09.92]啊...我爱你\n[02:19.64]啊...塞北的雪 塞北的雪\n[02:36.72]\n"},"code":200}
`;
//        
var opts = {
    lrcTxt:lrctxt,
    audioURL:"https://music.163.com/song/media/outer/url?id=1996640600.mp3",
}
new lrcPlayerY(opts);
-->
</script>

静悟

肖燕 发表于 2025-2-11 14:00
我哪里会编代码，我要会了就好了，现在就是套用都出错。我刚才对照了，我的代码中没有您那个居中的代码。 ...

代码测试过了，有歌曲啊，歌也会出来的。

静悟

静悟

肖燕 发表于 2025-2-11 15:39
.lrcShow{
        font:bold 2.5em 黑体;color:white;                /* 歌词字体、大小、背景颜色  ...

你看63楼的测试帖，就是文字的最后字没有了。把高度再加高点。

静悟

静悟 发表于 2025-2-11 15:57
本帖最后由 静悟 于 2025-2-11 16:10 编辑
.lrcShow{
        font:bold 2.5em 黑体;color:white;      ...

1. <style>
   
2. .lrcShow{
   
3.         font:bold 2.5em 黑体;color:white;                /* 歌词字体、大小、背景颜色        */
   
4.         position:absolute;bottom:0px;left:20%;        /*        歌词的位置        */
   
5.         width:80%;height:1.5em;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;
   
6. }
   
7. .lrcShow::before{        /* 歌词动态前景色等，不熟悉就不要改动        */        
   
8.         position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;color:darkred
   
9.         background-image:linear-gradient(90deg,hsl(30,100%,25%),hsl(60,100%,50%),hsl(90,100%,75%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;
   
10.         animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);
    
11. }
    
12. @keyframes bgMove1{from{width:0;}to{width:100%;}}
    
13. @keyframes bgMove0{from{width:0;}to{width:100%;}}
    
14. 
    
15. #oblk        {        /*        画面有关的设置        */
    
16.         overflow:hidden;border-radius:24px;width:1100px; height:650px;position:relative; left: 0px;
    
17.         box-shadow:3px 3px 20px black;background:url(https://pic1.imgdb.cn/item/6784e970d0e0a243d4f3ed0f.gif) no-repeat 0 0 /cover;
    
18.         font-size:15px; margin:90px 0 32px -196px;        /*        帖子字体的缺省设置、画面位置设置        */
    
19. }
    
20. /*        下面是帖子标题的有关设置        */                        
    
21. .descTitle{fill:transparent;stroke-width:2;stroke-dasharray:0 300;stroke-dashoffset:0;stroke:hsl(60,100%,40%);letter-spacing:1em;font-size:2.5em;animation:varstroke 20s ease-in-out infinite alternate;}
    
22. @keyframes varstroke{to{stroke-dashoffset:2000;stroke-dasharray:300 0;}
    
23. </style>
    
24. 
    
25. <div id="oblk">        <!--         画面背景        ---->
    
26. 
    
27. <!--         画面标题        ---->
    
28. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    
29. version="1.1" viewBox="0 0 1000 558" id="svgadmin">
    
30. <text text-anchor="middle" x="52.5%" y="12.5%" class="descTitle"></text></svg>
    
31. 
    
32. <!--         LRC歌词显示        ---->
    
33. <div class="lrcShow" data-lrc="点击启动播放"></div>
    
34. </div>
    
35. <script>
    
36. document.write('<script type="text/javascript" src="http://cesholl.3vcn.work/scripts/lrcPlayerS.packed.js"><\/script>');
    
37. </script>
    
38. <script>
    
39. <!--
    
40. var lrctxt = `
    
41. 
    
42. {"sgc":false,"sfy":false,"qfy":false,"lrc":{"version":7,"lyric":"[00:00.00] 作词 : 王德\n[00:01.00] 作曲 : 刘锡津\n[00:16.59]我爱你塞北的雪\n[00:26.61]飘飘洒洒漫天遍野\n[00:36.10]你的舞姿是那样的轻盈\n[00:39.88]你的心地是那样的纯洁\n[00:44.88]你是春雨的亲姐妹哟\n[00:56.79]你是春天派出的使节\n[01:02.52]春天的使节\n[01:06.20]\n[01:19.26]我爱你塞北的雪\n[01:28.33]飘飘洒洒漫天遍野\n[01:37.92]你用白玉般的身躯\n[01:42.64]装扮银光闪闪的世界\n[01:48.12]你把生命溶进了土地哟\n[01:59.10]滋润着返青的麦苗迎春的花儿\n[02:09.92]啊...我爱你\n[02:19.64]啊...塞北的雪 塞北的雪\n[02:36.72]\n"},"code":200}
    
43. `;
    
44. //        
    
45. var opts = {
    
46.     lrcTxt:lrctxt,
    
47.     audioURL:"https://music.163.com/song/media/outer/url?id=1996640600.mp3",
    
48. }
    
49. new lrcPlayerY(opts);
    
50. -->
    
51. </script>
    

复制代码

静悟

肖燕 发表于 2025-2-11 15:39
.lrcShow{
        font:bold 2.5em 黑体;color:white;                /* 歌词字体、大小、背景颜色  ...

65楼的代码正好。

静悟

肖燕 发表于 2025-2-11 15:39
.lrcShow{
        font:bold 2.5em 黑体;color:white;                /* 歌词字体、大小、背景颜色  ...

你的这款代码是潇管在做的代码。它的帖子居中是要根据图片宽度来定的。

font-size:15px; margin:90px 0 32px -300px;      红色代码就是来定居中 左右的。

肖燕

静悟 发表于 2025-2-11 15:57
代码测试过了，有歌曲啊，歌也会出来的。

静悟姐，我新做的是红梅赞，因为有问题，所以我没发那个代码。这个帖子是我开始做的《我爱你塞北的雪》，其他都改成了潇老师教的代码，图片和歌没改。

静悟

肖燕 发表于 2025-2-11 16:44
静悟姐，我新做的是红梅赞，因为有问题，所以我没发那个代码。这个帖子是我开始做的《我爱你塞北的雪》， ...

你就把红梅赞的图片和歌词代进去就是了。

肖燕

静悟 发表于 2025-2-11 16:21
你的这款代码是潇管在做的代码。它的帖子居中是要根据图片宽度来定的。

font-size:15px; margin:90px ...

歌词与歌声现在没对上，是什么问题呢？