惜别

马黑黑

:doodle { @size: 1024px 640px; background: teal url('https://638183.freep.cn/638183/t23/2/118.jpg') no-repeat center/cover; box-shadow: 0 0 8px #000; position: relative; margin: 0 0 0 calc(50% - 593px); z-index: 1; --state: running; } @place: center; @nth(@size,@size - 1) { @size: 120px; cursor: pointer; background: none; } @nth(@size - 1) { background: tan; clip-path: @shape( points: 200; scale: .8; frame: 100; r: sin(7t)/2^cos(14t)/4; ); animation: rot 6s infinite linear var(--state); } @match(i ≤ @size - 2) { @size: 20px; position: absolute; background: rgba(@m3(@r(255)),.95); border-radius: 50%; transform: rotate(var(--deg)) translate(100px); animation: go 10s infinite linear var(--state); --deg: calc(@i * 360deg / (@size - 2)); } @keyframes rot { to { transform: rotate(360deg); } } @keyframes go { to { transform: rotate(calc(-360deg + var(--deg))) translate(100px); } }

红影

25个格子，最后圆球23个，播放器一个，还一个格子派什么用处了？

马黑黑

帖子代码

1. <css-doodle grid="5" id="papa">
   
2.         :doodle {
   
3.                 @size: 1024px 640px;
   
4.                 background: teal url('https://638183.freep.cn/638183/t23/2/118.jpg') no-repeat center/cover;
   
5.                 box-shadow: 0 0 8px #000;
   
6.                 position: relative;
   
7.                 margin: 0 0 0 calc(50% - 593px);
   
8.                 z-index: 1;
   
9.                 --state: running;
   
10.         }
    
11.         @place: center;
    
12.         @nth(@size,@size - 1) {
    
13.                 @size: 120px;
    
14.                 cursor: pointer;
    
15.                 background: none;
    
16.         }
    
17.         @nth(@size - 1) {
    
18.                 background: tan;
    
19.                 clip-path: @shape(
    
20.                         points: 200;
    
21.                         scale: .8;
    
22.                         frame: 100;
    
23.                         r: sin(7t)/2^cos(14t)/4;
    
24.                 );
    
25.                 animation: rot 6s infinite linear var(--state);
    
26.         }
    
27.         @match(i ≤ @size - 2) {
    
28.                 @size: 20px;
    
29.                 position: absolute;
    
30.                 background: rgba(@m3(@r(255)),.95);
    
31.                 border-radius: 50%;
    
32.                 transform: rotate(var(--deg)) translate(100px);
    
33.                 animation: go 10s infinite linear var(--state);
    
34.                 --deg: calc(@i * 360deg / (@size - 2));
    
35.         }
    
36.         @keyframes rot { to { transform: rotate(360deg); } }
    
37.         @keyframes go { to { transform: rotate(calc(-360deg + var(--deg))) translate(100px); } }
    
38. </css-doodle>
    
39. 
    
40. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31830835" autoplay="autoplay" loop="loop"></audio>
    
41. 
    
42. <script>
    
43. (function() {
    
44.         let script = document.createElement('script');
    
45.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    
46.         document.head.appendChild(script);
    
47.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
48.         aud.addEventListener('play', mState, false);
    
49.         aud.addEventListener('pause', mState, false);
    
50.         window.onload = () => {
    
51.                 let mplayers = papa.shadowRoot.querySelectorAll('cell');
    
52.                 mplayers[mplayers.length - 1].onclick = () => aud.paused ? aud.play() : aud.pause();
    
53.         }
    
54. })();
    
55. </script>

复制代码

马黑黑

醉美水芙蓉 发表于 2023-6-7 22:39
欣赏老师精美作品！

红影

这个和Trespass那个帖子里的做法不同呢，JS里多了最后那两句，才能对应上播放器的点击。
可以有这么多变化，真的是越学越迷糊了

红影

这个帖子运用了那个JS精准操作css-doodle单元格的技术，很赞

马黑黑

红影 发表于 2023-6-7 22:56
这个和Trespass那个帖子里的做法不同呢，JS里多了最后那两句，才能对应上播放器的点击。
可以有这么多变化 ...

这帖就是影子目录树的具体应用了

马黑黑

红影 发表于 2023-6-7 22:57
这个帖子运用了那个JS精准操作css-doodle单元格的技术，很赞

看出来了

马黑黑

红影 发表于 2023-6-7 22:58
25个格子，最后圆球23个，播放器一个，还一个格子派什么用处了？

最后一个单元格实际上起到的作用是接收鼠标点击。css-doodle使用 clip-path 切割单元格做外观，有镂空区域，那些区域无法接收鼠标点击，所以用一个同尺寸的透明的单元格覆盖它

红影

马黑黑 发表于 2023-6-7 23:01
最后一个单元格实际上起到的作用是接收鼠标点击。css-doodle使用 clip-path 切割单元格做外观，有镂空区 ...

原来如此。太晚了，下了，明天再来学习

马黑黑

红影 发表于 2023-6-7 23:05
原来如此。太晚了，下了，明天再来学习

晚安

梦缘

好看的播放器，感谢代码分享！

红影

马黑黑 发表于 2023-6-7 22:57
这帖就是影子目录树的具体应用了

mplayers.length - 1和@size - 1有什么区别，前者的表达还是第一次看到呢

红影

马黑黑 发表于 2023-6-7 22:57
看出来了

还以为这里的小圆点也能一个个点击变色呢，原来只是取出一个来派接收鼠标点击的作用

红影

马黑黑 发表于 2023-6-7 23:01
最后一个单元格实际上起到的作用是接收鼠标点击。css-doodle使用 clip-path 切割单元格做外观，有镂空区 ...

这个大小是120吧，覆盖的位置就是当中的那个按钮。
你现在取的是 @place: center; 不知若变到需要的位置，这三样东西会不会错位

起个网名好难

欣赏、学习， 上午好！

起个网名好难

1.             window.onload = () => {
   
2.                     let mplayers = papa.shadowRoot.querySelector('#c-5-5-1');
   
3.                     mplayers.onclick = () => aud.paused ? aud.play() : aud.pause();
   
4.             }
   

复制代码

也可以

马黑黑

起个网名好难 发表于 2023-6-8 11:00
也可以

是的，每一个 cell 都有 id

马黑黑

红影 发表于 2023-6-8 10:44
这个大小是120吧，覆盖的位置就是当中的那个按钮。
你现在取的是 @place: center; 不知若变到需要的位置 ...

不会。都居中着呢