论坛 › 欢乐水吧 › 惜别

马黑黑 发表于 2023-6-7 22:18

惜别

<css-doodle grid="5" id="papa">
        :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); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=31830835" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        window.onload = () => {
                let mplayers = papa.shadowRoot.querySelectorAll('cell');
                mplayers.onclick = () => aud.paused ? aud.play() : aud.pause();
        }
})();
</script>

红影 发表于 2023-6-7 22:58

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

马黑黑 发表于 2023-6-7 22:19

帖子代码
<css-doodle grid="5" id="papa">
        :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); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=31830835" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        window.onload = () => {
                let mplayers = papa.shadowRoot.querySelectorAll('cell');
                mplayers.onclick = () => aud.paused ? aud.play() : aud.pause();
        }
})();
</script>

醉美水芙蓉 发表于 2023-6-7 22:39

马黑黑 发表于 2023-6-7 22:40

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

{:4_190:}

红影 发表于 2023-6-7 22:56

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

红影 发表于 2023-6-7 22:57

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

马黑黑 发表于 2023-6-7 22:57

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

马黑黑 发表于 2023-6-7 22:57

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

看出来了

马黑黑 发表于 2023-6-7 23:01

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

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

红影 发表于 2023-6-7 23:05

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

原来如此。太晚了，下了，明天再来学习{:4_187:}

马黑黑 发表于 2023-6-7 23:11

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

晚安

梦缘 发表于 2023-6-8 09:36

好看的播放器，感谢代码分享！{:4_187:}

红影 发表于 2023-6-8 10:39

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

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

红影 发表于 2023-6-8 10:40

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

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

红影 发表于 2023-6-8 10:44

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

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

起个网名好难 发表于 2023-6-8 10:59

欣赏、学习， 上午好！

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

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

也可以

马黑黑 发表于 2023-6-8 12:09

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

是的，每一个 cell 都有 id

马黑黑 发表于 2023-6-8 12:09

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

不会。都居中着呢

查看完整版本: 惜别