《画里有话》 - 尹昔眠（试帖黑黑老师音频播放控制器应用实例）

亦是金

红影 发表于 2023-5-12 11:04
艾特好了以后，有细线显示，表明已经发送给对方了

谢谢红影详细介绍！

亦是金

红影 发表于 2023-5-12 11:05
亦是金老师每次做帖子都有自己的修改，很棒的

哈哈哈，总想夹带一点私货！

起个网名好难

亦是金 发表于 2023-5-12 09:18
问好老师！谢谢老师点评！我想在帖子里加上花朵飞舞效果，反复捣鼓没有成功。请老师指点！谢谢 ...

1. <css-doodle grid="16">
   
2.         :doodle {
   
3.                 @size: 1000px 667px;
   
4.         }
   
5.         position: absolute;
   
6.         left: -10%;
   
7.         top: @r(100)%;
   
8.         :after {
   
9.                 position: absolute;
   
10.                 content: '@p(&#9833;,&#9834;,&#9835;,&#9836;,&#9829;,&#10057;,&#10047;,&#10048;,&#9784;)';
    
11.                 color:pink;
    
12.                 font-size: @r(10, 40)px;
    
13.         }
    
14.         animation: fall @r(6,20)s @r(-6, 6)s infinite;
    
15.         @keyframes fall {
    
16.                 0% { left: -20%; transform: rotate(0deg); }
    
17.                 100% {left: 120%; transform: rotate(@p(360, 720)deg); }
    
18.         }
    
19. </css-doodle>

复制代码

把这段代码放在你的<css-doodle> 代码段后面试试看

起个网名好难

:doodle { @grid: 2 / 550px 100px; position: absolute; color: var(--color); bottom: 0; --prog: 0%; --size: 60px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: #1434f6; --state: paused; z-index:99; } @nth(1) {@place: 35% 100%;:after { content: var(--ttmsg1); }} @nth(2) {@size: var(--size);@shape: windmill;@place: 50% 35%;background: var(--color);animation: rot 6s infinite linear var(--state);} @nth(3) {@place: 65% 100%;:after { content: var(--ttmsg2); }} @nth(4) {@place: 50% 80%;@size: 100% 2px;background: #bbb;display: grid;place-items: center start;:before {content: '';width: var(--prog);height: 100%;background: var(--color);}} @keyframes rot { to { transform: rotate(1turn); } } :doodle { @size: 1000px 667px; --state:paused; } position: absolute; left: -10%; top: @r(100)%; :after { position: absolute; content: '@p(♩,♪,♫,♬,♥,❉,✿,❀,☸)'; color:pink; font-size: @r(10, 40)px; } animation: fall @r(6,20)s @r(-6, 6)s infinite var(--state); @keyframes fall { 0% { left: -20%; transform: rotate(0deg); } 100% {left: 120%; transform: rotate(@p(360, 720)deg); } }

《 画 里 有 话 》 - 尹昔眠

亦是金在线音乐 花潮论坛lrc在线

马黑黑

亦是金 发表于 2023-5-12 08:45
@黑黑老师，我想在帖子里加上花朵飞舞效果，反复捣鼓没有成功。请老师指点！谢谢！

你再加一个 css-doodle 标签，注意id不要雷同，同时需要提升播放器的z-index值以免它处于下层

亦是金

起个网名好难 发表于 2023-5-12 11:40
本帖最后由 起个网名好难 于 2023-5-12 11:46 编辑

谢谢老师！我去试试！

亦是金

马黑黑 发表于 2023-5-12 11:44
你再加一个 css-doodle 标签，注意id不要雷同，同时需要提升播放器的z-index值以免它处于下层

好的！我试试去！谢谢老师！

亦是金

醉美水芙蓉 发表于 2023-5-12 11:53
做得漂亮！

问好醉美水芙蓉！谢谢欣赏！

亚伦影音工作室

好像控制按钮无效，须调整！

亦是金

亚伦影音工作室 发表于 2023-5-12 14:52
好像控制按钮无效，须调整！

问好亚伦！已经调整，现在应该正常了！

红影

亦是金 发表于 2023-5-12 11:09
谢谢红影详细介绍！

太客气了点，这个就是彼此交流而已啊

红影

亦是金 发表于 2023-5-12 11:12
哈哈哈，总想夹带一点私货！

这样的尝试很好的

小文

唯美的图画，欣赏