蓝天白云

马黑黑

: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: '🐕';} } @nth(16) { @place: 50% 20%; font-size: 5em; cursor: pointer; :after {content: '🏵️';} animation: rot 5s infinite linear var(--state); } @keyframes rot { to { transform: rotate(1turn); } }

马黑黑

代码

1. <css-doodle grid="4" click-to-update id="mplayer">
   
2.         :doodle {
   
3.                 @size: 1024px 640px;
   
4.                 background: url('https://638183.freep.cn/638183/t23/2/xp.jpg') no-repeat center / cover;
   
5.                 box-shadow: 0 0 6px #000;
   
6.                 display: block;
   
7.                 position: relative;
   
8.                 margin: 0 0 0 calc(50% - 593px);
   
9.                 z-index: 1;
   
10.                 --state: paused;
    
11.         }
    
12.         @match(i ≤ 14) {
    
13.                 @place: @r(100,924)px @r(480,540)px;
    
14.                 @size: 200px;
    
15.                 background-image: @svg(
    
16.                         viewBox: 0 0 10 10;
    
17.                         stroke: tan;
    
18.                         stroke-width: .1;
    
19.                         path*3 {
    
20.                                 fill: none;
    
21.                                 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);
    
22.                         }
    
23.                         circle*3 {
    
24.                                 fill: @pn(purple, crimson, deeppink);
    
25.                                 cx, cy: @pn(8 1, 2 4, 8 4);
    
26.                                 r: .5;
    
27.                         }
    
28.                 );
    
29.         }
    
30.         @nth(15) {
    
31.                 @place: 50% 640px;
    
32.                 font-size: 3.5em;
    
33.                 :after {content: '&#128021;';}
    
34.         }
    
35.         @nth(16) {
    
36.                 @place: 50% 20%;
    
37.                 font-size: 5em;
    
38.                 cursor: pointer;
    
39.                 :after {content: '&#127989;&#65039;';}
    
40.                 animation: rot 5s infinite linear var(--state);
    
41.         }
    
42.         @keyframes rot { to { transform: rotate(1turn); } }
    
43. </css-doodle>
    
44. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1384526796" autoplay="autoplay" loop="loop"></audio>
    
45. 
    
46. <script>
    
47. (function() {
    
48.         let script = document.createElement('script');
    
49.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    
50.         document.head.appendChild(script);
    
51.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
52.         aud.addEventListener('play', mState, false);
    
53.         aud.addEventListener('pause', mState, false);
    
54.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
55. })();
    
56. </script>

复制代码

马黑黑

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

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

亦是金

神奇的代码，好看的画面！收藏了！

梦油

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

梦缘

好有趣的帖，感谢老师代码分享！

樵歌

这个画面好熟悉。

马黑黑

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

说明你用过 Windows XP

马黑黑

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

南无月

蓝天高远，白云悠悠，这贴子令人心旷神怡，极美

马黑黑

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

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

马黑黑

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

马黑黑

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

南无月

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

南无月

你用了两个Emoji图标。。。。还有一只小狗狗

马黑黑

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

马黑黑

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

鉴定完毕

南无月

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

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

南无月

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

https://www.emojidaquan.com/
厉害，这样岂不是做贴子花样的可能性更大