寻

马黑黑

:doodle { @size: 1024px 640px; background: url('https://638183.freep.cn/638183/t23/2/200.jpg') no-repeat center/cover; box-shadow: 0 0 6px #000; position: relative; margin: 0 0 0 calc(50% - 593px); z-index: 1; --state: paused; } @size: 100px; clip-path: @shape( points: 200; scale: .3; x: 2 * cos(3t) + cos(t); y: 2 * sin(t) + sin(2t); ); position: absolute; background: rgb(@m3(@r(255))); offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z'); animation: move 40s infinite linear var(--state); cursor: pointer; @keyframes move { to { offset-distance: 100%; } }

马黑黑

帖子代码

1. <css-doodle grid="1" id="mplayer">
   
2.         :doodle {
   
3.                 @size: 1024px 640px;
   
4.                 background: url('https://638183.freep.cn/638183/t23/2/200.jpg') no-repeat center/cover;
   
5.                 box-shadow: 0 0 6px #000;
   
6.                 position: relative;
   
7.                 margin: 0 0 0 calc(50% - 593px);
   
8.                 z-index: 1;
   
9.                 --state: paused;
   
10.         }
    
11.         @size: 100px;
    
12.         clip-path: @shape(
    
13.                 points: 200;
    
14.                 scale: .3;
    
15.                 x: 2 * cos(3t) + cos(t);
    
16.                 y: 2 * sin(t) + sin(2t);
    
17.         );
    
18.         position: absolute;
    
19.         background: rgb(@m3(@r(255)));
    
20.         offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z');
    
21.         animation: move 40s infinite linear var(--state);
    
22.         cursor: pointer;
    
23.         @keyframes move { to { offset-distance: 100%;  } }
    
24. </css-doodle>
    
25. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2021178386" autoplay="autoplay" loop="loop"></audio>
    
26. 
    
27. <script>
    
28. (function() {
    
29.         let script = document.createElement('script');
    
30.         script.src = '/css-doodle.min.js';
    
31.         document.head.appendChild(script);
    
32.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
33.         aud.addEventListener('play', mState, false);
    
34.         aud.addEventListener('pause', mState, false);
    
35.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. })();
    
37. </script>

复制代码

南无月

看看老师新贴中的新路径

红影

这个黑黑用了圆弧的命令，圆弧里用了那么多参数，弄得我赶紧去复习之前的东西了

红影

这个播放器的图形选得漂亮，线路也设计得漂亮。给黑黑点赞

马黑黑

南无月 发表于 2023-5-21 08:11
看看老师新贴中的新路径

椭圆路径，其实是两个弧形曲线凑成的

马黑黑

红影 发表于 2023-5-21 08:19
这个黑黑用了圆弧的命令，圆弧里用了那么多参数，弄得我赶紧去复习之前的东西了

数学学霸掌握这个东东没啥难度

马黑黑

红影 发表于 2023-5-21 08:20
这个播放器的图形选得漂亮，线路也设计得漂亮。给黑黑点赞

感谢支持。上午好

亚伦影音工作室

啥东东看不懂！这个是绕椭圆，&#128031;鱼是绕三角！

马黑黑

亚伦影音工作室 发表于 2023-5-21 09:26
啥东东看不懂！这个是绕椭圆，&#128031;鱼是绕三角！

绕绕挺好

绿叶清舟

还会变颜色的

一斛珠

红影 发表于 2023-5-21 08:20
这个播放器的图形选得漂亮，线路也设计得漂亮。给黑黑点赞

播放器啥样，我咋看不见

一斛珠

这曲子我也喜欢

梦油

这个播放器设计的有新意。

马黑黑

醉美水芙蓉 发表于 2023-5-21 11:19
黑黑老师设计真漂亮！

这个是极简风格

一斛珠

马黑黑 发表于 2023-5-21 11:25
这个是极简风格

黑黑老师，飞机是播放器吗？

马黑黑

一斛珠 发表于 2023-5-21 11:34
黑黑老师，飞机是播放器吗？

它可以控制音乐，整个页面其实也都可以通过单击控制音乐

焱鑫磊

黑黑老师棒棒哒！赞！