马黑黑 发表于 2023-5-29 12:07

蓝天白云

<css-doodle grid="4" click-to-update id="mplayer">
        :doodle {
                @size: 1024px 640px;
                background: url('https://638183.freep.cn/638183/t23/2/xp.jpg') no-repeat center / cover;
                box-shadow: 0 0 6px #000;
                display: block;
                position: relative;
                margin: 0 0 0 calc(50% - 593px);
                z-index: 1;
                --state: paused;
        }
        @match(i ≤ 14) {
                @place: @r(100,924)px @r(480,540)px;
                @size: 200px;
                background-image: @svg(
                        viewBox: 0 0 10 10;
                        stroke: tan;
                        stroke-width: .1;
                        path*3 {
                                fill: none;
                                d: @pn(M 5 10 Q 5 5 8 1, M 5 10 Q 4 5 2 4, M 5 10 Q 6 6 8 4);
                        }
                        circle*3 {
                                fill: @pn(purple, crimson, deeppink);
                                cx, cy: @pn(8 1, 2 4, 8 4);
                                r: .5;
                        }
                );
        }
        @nth(15) {
                @place: 50% 640px;
                font-size: 3.5em;
                :after {content: '&#128021;';}
        }
        @nth(16) {
                @place: 50% 20%;
                font-size: 5em;
                cursor: pointer;
                :after {content: '&#127989;️';}
                animation: rot 5s infinite linear var(--state);
        }
        @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1384526796" 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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-5-29 12:20

代码
<css-doodle grid="4" click-to-update id="mplayer">
        :doodle {
                @size: 1024px 640px;
                background: url('https://638183.freep.cn/638183/t23/2/xp.jpg') no-repeat center / cover;
                box-shadow: 0 0 6px #000;
                display: block;
                position: relative;
                margin: 0 0 0 calc(50% - 593px);
                z-index: 1;
                --state: paused;
        }
        @match(i ≤ 14) {
                @place: @r(100,924)px @r(480,540)px;
                @size: 200px;
                background-image: @svg(
                        viewBox: 0 0 10 10;
                        stroke: tan;
                        stroke-width: .1;
                        path*3 {
                                fill: none;
                                d: @pn(M 5 10 Q 5 5 8 1, M 5 10 Q 4 5 2 4, M 5 10 Q 6 6 8 4);
                        }
                        circle*3 {
                                fill: @pn(purple, crimson, deeppink);
                                cx, cy: @pn(8 1, 2 4, 8 4);
                                r: .5;
                        }
                );
        }
        @nth(15) {
                @place: 50% 640px;
                font-size: 3.5em;
                :after {content: '&#128021;';}
        }
        @nth(16) {
                @place: 50% 20%;
                font-size: 5em;
                cursor: pointer;
                :after {content: '&#127989;️';}
                animation: rot 5s infinite linear var(--state);
        }
        @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1384526796" 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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-5-29 12:23

@match(i ≤ 14) { ... } 部分，是底部的装饰，袁川大佬的演示svg的图案，我仅做一些小改动。

使用过 Windows XP 的朋友，对这个背景图会有亲切感。

亦是金 发表于 2023-5-29 13:14

神奇的代码，好看的画面！收藏了！{:4_190:}

梦油 发表于 2023-5-29 15:28

碧空衬着淡蓝，它带给人们总是那么纯洁和清爽。如果云团缓缓地移动起来一定更美。

梦缘 发表于 2023-5-29 16:17

好有趣的帖，感谢老师代码分享！{:4_187:}

醉美水芙蓉 发表于 2023-5-29 17:05

樵歌 发表于 2023-5-29 17:28

这个画面好熟悉。

马黑黑 发表于 2023-5-29 18:16

樵歌 发表于 2023-5-29 17:28
这个画面好熟悉。

说明你用过 Windows XP

马黑黑 发表于 2023-5-29 18:17

亦是金 发表于 2023-5-29 13:14
神奇的代码，好看的画面！收藏了！

{:4_191:}

南无月 发表于 2023-5-29 18:17

蓝天高远，白云悠悠，这贴子令人心旷神怡，极美{:4_187:}

马黑黑 发表于 2023-5-29 18:18

梦油 发表于 2023-5-29 15:28
碧空衬着淡蓝，它带给人们总是那么纯洁和清爽。如果云团缓缓地移动起来一定更美。

背景画面是Windows XP的桌面壁纸

马黑黑 发表于 2023-5-29 18:18

梦缘 发表于 2023-5-29 16:17
好有趣的帖，感谢老师代码分享！

{:4_190:}

马黑黑 发表于 2023-5-29 18:18

醉美水芙蓉 发表于 2023-5-29 17:05
欣赏老师好作品！

{:4_190:}

南无月 发表于 2023-5-29 18:23

这个彩色播放器居然是个Emoji图标，一下子看不出来{:4_173:}厉害了黑大神

南无月 发表于 2023-5-29 18:23

你用了两个Emoji图标。。。。还有一只小狗狗{:4_173:}

马黑黑 发表于 2023-5-29 19:00

南无月 发表于 2023-5-29 18:23
这个彩色播放器居然是个Emoji图标，一下子看不出来厉害了黑大神

{:4_200:}

马黑黑 发表于 2023-5-29 19:00

南无月 发表于 2023-5-29 18:23
你用了两个Emoji图标。。。。还有一只小狗狗

鉴定完毕{:4_172:}

南无月 发表于 2023-5-29 20:04

马黑黑 发表于 2023-5-29 19:00


{:4_173:}我把代码复制到pencilcode里发现的，这样能用的图标好多呀。

南无月 发表于 2023-5-29 20:05

马黑黑 发表于 2023-5-29 19:00
鉴定完毕

https://www.emojidaquan.com/
厉害，这样岂不是做贴子花样的可能性更大
页: [1] 2 3 4 5 6
查看完整版本: 蓝天白云