你是我的愛 ，我的生命

马黑黑

醉美水芙蓉 发表于 2023-6-3 21:50
@马黑黑 老师播放器歌词变成旋转的了，不会改了！

css里，以下这一句，是我针对唯一一个 css-doodle 做的，现在你有两个 css-doodle 标签，是它让 歌词也转动了：

css-doodle {
        position: relative;
        left: 50px;
        top: 250px;
        animation: rot 6s infinite linear var(--state);
}

解决方法：把 css-doodle { ... } 中的 css-doodle 改为 id 标签：

#mplayer {
        position: relative;
        left: 50px;
        top: 250px;
        animation: rot 6s infinite linear var(--state);
}

马黑黑

醉美水芙蓉 发表于 2023-6-4 19:46
问候黑黑老师晚上好！感谢老师百忙之中光临指导！

你在看另一个回复

马黑黑

醉美水芙蓉 发表于 2023-6-4 19:59
无意制作使歌词翻转了，不过可以转慢点，快了看不清歌词！

你按我的建议去改改

南无月

醉美水芙蓉 发表于 2023-6-3 21:47
啊呀！月儿播放器出问题了呢？不知道怎么解决呢？

我今天也用这个小播做了一个贴子，把小播单独整出来了。发给你瞧瞧

南无月

:doodle {@size: 190px; position: relative; cursor: pointer; left: 50px; top: 120px; z-index: 10; } background: @doodle( :doodle { @grid: 3 ; @size: 190px; background: radial-gradient(DarkCyan,transparent 70%,transparent 0); cursor: pointer; } @shape: clover 3; @place: center; background: Peru; transform: rotate(calc(@i * 40deg)) translate(60px); ); animation: rot 6s infinite linear var(--state); @keyframes rot { to { transform: rotate(1turn); } } :doodle { @size: auto 4em; bottom: 10px; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color:AntiqueWhite; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: Tan; /* 同步歌词颜色 */ overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); } @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } }

南无月

<css-doodle  grid="1" id="mplayer" >
        :doodle {@size: 190px;
        position: relative;
        cursor: pointer;
    left: 410px;
    top: 120px;
    z-index: 10;
               
        }
        background: @doodle(
                 :doodle {      @grid: 3 ;
                            @size: 190px;
                            background: radial-gradient(DarkCyan,transparent 70%,transparent 0);
                            cursor: pointer;
                    }
                   @shape: clover 3;
                    @place: center;
                    background: Peru;
                    transform: rotate(calc(@i * 40deg)) translate(60px);
        );  
                animation: rot 6s infinite linear var(--state);
         @keyframes rot { to { transform: rotate(1turn); } }

            </css-doodle>

南无月

颜色是我用的颜色，歌词位置自己改哈。。

马黑黑

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: lightblue url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/185360624d54f427ea1b20fed751c483.mp4.jpg') no-repeat center / cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         z-index: 1;
   
10.         --state: paused;
    
11. }
    
12. #mplayer {
    
13.         position: relative;
    
14.         left: 50px;
    
15.         top: 250px;
    
16.         animation: rot 6s infinite linear var(--state);
    
17. }
    
18. @keyframes rot { to { transform: rotate(1turn); } }
    
19. </style>
    
20. 
    
21. <div id="papa">
    
22.         <css-doodle grid="3" id="mplayer">
    
23.                 :doodle {
    
24.                         @size: 160px;
    
25.                         background: radial-gradient(darkgreen,transparent 70%,transparent 0);
    
26.                         cursor: pointer;
    
27.                 }
    
28.                 @shape: clover 3;
    
29.                 @place: center;
    
30.                 background: green;
    
31.                 transform: rotate(calc(@i * 40deg)) translate(60px);
    
32.         </css-doodle>
    
33. 
    
34.         <css-doodle id="lrc">
    
35.                 :doodle {
    
36.                         @size: auto 4em;
    
37.                         z-index:5;
    
38.                         bottom: 0px;
    
39.                         --geci: "css-doodle player";
    
40.                         --motion: cover2;
    
41.                         --tt: 1s;
    
42.                 }
    
43.                 /* 单元格两个伪元素显示lrc歌词 */
    
44.                 display: grid;
    
45.                 place-items: center start;
    
46.                 :before, :after {
    
47.                         content: var(--geci);
    
48.                         color: Honeydew;
    
49.                         /* 歌词底色 */
    
50.                         font: bold 2em sans-serif;
    
51.                         text-shadow: 1px 1px 2px #000;
    
52.                         white-space: pre;
    
53.                 }
    
54.                 :after {
    
55.                         position: absolute;
    
56.                         width: 0;
    
57.                         color:Teal;
    
58.                         /* 同步歌词颜色 */
    
59.                         overflow: hidden;
    
60.                         animation: var(--motion) var(--tt) linear forwards var(--state);
    
61.                 }
    
62.                 @keyframes cover1 { from { width: 0; } to { width: 100%; } }
    
63.                 @keyframes cover2 { from { width: 0; } to { width: 100%; } }
    
64.         </css-doodle>
    
65.         <audio id="aud" src="https://www.qqmc.com/mp3/music170783213.mp3" autoplay="" loop=""></audio>
    
66. </div>
    
67.                
    
68. <script>
    
69.         let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
    
70.         let lrcAr = [
    
71.         [0,"YOURE MY LOVE YOURE MY LIFE",6.0],
    
72.         [6.02,"Lyrics by：Gerd Rochel/Cindy Hire",6.0],
    
73.         [12.05,"Composed by：Gerd Rochel",6.0],
    
74.         [18.07,"Seems you're an angel from the sky",3.0],
    
75.         [21.09,"LRC编辑：醉美水芙蓉",1.0],
    
76.         [22.06,"You fill my fantasy",3.0],
    
77.         [25.01,"",1.1],
    
78.         [26.07,"The way you look takes me so high",3.0],
    
79.         [29.09,"",1.0],
    
80.         [30.06,"You're everything to me",2.0],
    
81.         [32.1,"",1.0],
    
82.         [33.08,"And all I want is your photograph",4.0],
    
83.         [37.09,"How I'm longing for your smile",3.9],
    
84.         [41.01,"",0.1],
    
85.         [41.07,"So come and touch me",3.0],
    
86.         [44.05,"Come and feel me",2.0],
    
87.         [46.04,"Hear me cry",3.0],
    
88.         [49.06,"You're my love you're my love",2.0],
    
89.         [51.06,"You're my life you're my life",2.0],
    
90.         [53.06,"Everyday everyday",2.0],
    
91.         [55.07,"Every night every night",2.0],
    
92.         [57.07,"Is it right is it right",2.0],
    
93.         [59.06,"What I feel what I feel",2.0],
    
94.         [61.07,"How I wish you were for real",3.0],
    
95.         [64.1,"",1.0],
    
96.         [65.06,"You're my love you're my love",2.0],
    
97.         [67.06,"You're my life you're my life",2.0],
    
98.         [69.07,"Everyday everyday",2.0],
    
99.         [71.07,"Every night every night",2.0],
    
100.         [73.07,"In my dreams in my dreams",2.0],
     
101.         [75.07,"I'm with you I'm with you",2.0],
     
102.         [77.07,"Will you make my dreams come true",3.9],
     
103.         [81.01,"",15.1],
     
104.         [96.09,"I'm all alone the night has come",3.9],
     
105.         [100.02,"",0.1],
     
106.         [100.09,"You're in my radio",3.0],
     
107.         [103.04,"",1.0],
     
108.         [104.09,"It's when you sing I feel the sun",3.9],
     
109.         [108.01,"",0.1],
     
110.         [108.09,"Now I can feel the show",3.9],
     
111.         [112,"Since forever more you're my destiny",3.1],
     
112.         [115.09,"Take my loneliness away",4.0],
     
113.         [119.04,"",0.0],
     
114.         [119.09,"So come and touch me",3.0],
     
115.         [122.07,"Come and feel me",2.0],
     
116.         [124.06,"Hear me say",3.0],
     
117.         [127.09,"You're my love you're my love",2.0],
     
118.         [129.09,"You're my life you're my life",2.9],
     
119.         [132,"Everyday everyday",2.0],
     
120.         [134.01,"Every night every night",1.1],
     
121.         [135.09,"Is it right is it right",2.0],
     
122.         [137.1,"What I feel what I feel",2.0],
     
123.         [139.09,"How I wish you were for real",3.9],
     
124.         [143.03,"",1.0],
     
125.         [144,"You're my love you're my love",1.1],
     
126.         [145.1,"You're my life you're my life",2.9],
     
127.         [148.02,"Everyday everyday",2.0],
     
128.         [150,"Every night every night",2.0],
     
129.         [152,"In my dreams in my dreams",2.0],
     
130.         [154.01,"I'm with you I'm with you",2.0],
     
131.         [156.01,"Will you make my dreams come true",3.1],
     
132.         [159.06,"",1.0],
     
133.         [160.02,"Since forever more you're my destiny",4.0],
     
134.         [164.02,"Take my loneliness away",3.0],
     
135.         [167.06,"",1.0],
     
136.         [168.02,"So come and touch me",2.1],
     
137.         [170.09,"Come and feel me",2.9],
     
138.         [173,"Hear me say",3.1],
     
139.         [176.06,"",36.0],
     
140.         [212.05,"You're my love you're my love",2.0],
     
141.         [214.03,"You're my life you're my life",2.0],
     
142.         [216.03,"Everyday everyday",2.0],
     
143.         [218.03,"Every night every night",2.0],
     
144.         [220.03,"Is it right is it right",2.0],
     
145.         [222.03,"What I feel what I feel",2.0],
     
146.         [224.04,"How I wish you were for real",3.0],
     
147.         [227.07,"",1.0],
     
148.         [228.04,"You're my love you're my love",2.0],
     
149.         [230.04,"You're my life you're my life",2.0],
     
150.         [232.04,"Everyday everyday",2.0],
     
151.         [234.04,"Every night every night",2.0],
     
152.         [236.04,"In my dreams in my dreams",2.0],
     
153.         [238.04,"I'm with you I'm with you",2.0],
     
154.         [240.04,"Will you make my dreams come true",3.0],
     
155.         [243.08,"",44.0],
     
156.         [287.04,"Hear me say",3.0],
     
157.         [290.07,"You're my love you're my love",2.0],
     
158.         [292.07,"You're my life you're my life",2.0],
     
159.         [294.07,"Everyday everyday",2.0],
     
160.         [296.07,"Every night every night",2.0],
     
161.         [298.08,"Is it right is it right",2.0],
     
162.         [300.07,"What I feel what I feel",2.0],
     
163.         [302.07,"How I wish you were for real",3.9],
     
164.         [306.01,"",0.1],
     
165.         [306.07,"You're my love you're my love",2.0],
     
166.         [308.08,"You're my life you're my life",2.0],
     
167.         [310.08,"Everyday everyday",2.0],
     
168.         [312.08,"Every night every night",2.0],
     
169.         [314.08,"In my dreams in my dreams",2.0],
     
170.         [316.08,"I'm with you I'm with you",2.0],
     
171.         [318.09,"Will you make my dreams come true",3.9],
     
172.         [322.02,"",58.0],
     
173.         [380,"You're my love you're my love",1.1],
     
174.         [381.09,"You're my life you're my life",2.0],
     
175.         [383.09,"Everyday everyday",2.0],
     
176.         [385.09,"Every night every night",2.0],
     
177.         [387.09,"Is it right is it right",2.0],
     
178.         [389.1,"What I feel what I feel",2.0],
     
179.         [391.09,"How I wish you were for real",3.9],
     
180.         [395.01,"",0.1],
     
181.         [395.09,"You're my love you're my love",2.0],
     
182.         [397.09,"You're my life you're my life",2.0],
     
183.         [399.1,"Everyday everyday",2.0],
     
184.         [401.1,"Every night every night",2.0],
     
185.         [403.1,"In my dreams in my dreams",2.0],
     
186.         [405.1,"I'm with you I'm with you",2.9],
     
187.         [408.01,"Will you make my dreams come true",3.0],
     
188.         [411.02,"",1.0],
     
189.         [412.01,"You're my love you're my love",2.0],
     
190.         [414,"You're my life you're my life",2.0],
     
191.         [416,"Everyday everyday",2.0],
     
192.         [418.01,"Every night every night",2.0],
     
193.         [420,"Is it right is it right",2.0],
     
194.         [422.01,"What I feel what I feel",2.0],
     
195.         [424.01,"How I wish you were for real",6.0],
     
196.         [430.04,"谢谢欣赏！",6]
     
197. ];
     
198. let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);showLrc(time);};
     
199. let script = document.createElement('script');
     
200. script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
     
201. document.body.appendChild(script);
     
202. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
203. let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr[mKey][1] + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
     
204. aud.addEventListener('play', mState, false);
     
205. aud.addEventListener('pause', mState, false);
     
206. aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr[j][0]) {cKey = j;if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
     
207. mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
     
208. </script>

复制代码

南无月

马黑黑 发表于 2023-6-4 22:02

学习老师的标准答案

马黑黑

南无月 发表于 2023-6-4 22:11
学习老师的标准答案

也许也不是标准的，只是简单梳理一下

马黑黑

醉美水芙蓉 发表于 2023-6-5 07:13
学习黑黑老师的标准答案！

南无月

马黑黑 发表于 2023-6-4 22:16
也许也不是标准的，只是简单梳理一下

我这里不存在也许，必须是标准的。

南无月

醉美水芙蓉 发表于 2023-6-5 07:14
月儿就是厉害！

其实很一般，整出来都凑巧，不知其所以然的乱整

亚伦影音工作室

不要轻易制作这些动效歌词，没有美感！如果非要制作最好起点和终点要合适停留在哪里！