用css-doodle做个表盘

马黑黑

:doodle { @size: 200px; border: 6px solid black; border-radius: 50%; background: @m60(radial-gradient(black 50%, black 0) @plot(r: 1) / 2px 2px no-repeat), @m12(radial-gradient(black 50%, black 0) @plot(r: 1) / 4px 4px no-repeat); } @place: center; position: absolute; @match(i ≤ 12) { :before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; } transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg)); } @nth(13) { @size: 10px; @shape: circle; background: black; } @nth(14) { @size: 2px 100px; top: 60px; background: black; transform-origin: 1px 86px; transform: rotate(120deg); } @nth(15) { @size: 3px 80px; top: 56px; background: black; transform-origin: 1.5px 80px; transform: rotate(30deg); } @nth(16) { @size: 4px 60px; top: 66px; background: black; transform-origin: 2px 60px; transform: rotate(15deg); }

马黑黑

代码

1. <css-doodle grid="4">
   
2.         :doodle {
   
3.                 @size: 200px;
   
4.                 border: 6px solid black;
   
5.                 border-radius: 50%;
   
6.                 background: @m60(radial-gradient(black 50%, black 0) @plot(r: 1) / 2px 2px no-repeat), @m12(radial-gradient(black 50%, black 0) @plot(r: 1) / 4px 4px no-repeat);
   
7.         }
   
8.         @place: center;
   
9.         position: absolute;
   
10.         @match(i ≤ 12) {
    
11.                 :before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
    
12.                 transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));
    
13.         }
    
14.         @nth(13) {
    
15.                 @size: 10px;
    
16.                 @shape: circle;
    
17.                 background: black;
    
18.         }
    
19.         @nth(14) {
    
20.                 @size: 2px 100px;
    
21.                 top: 60px;
    
22.                 background: black;
    
23.                 transform-origin: 1px 86px;
    
24.                 transform: rotate(120deg);
    
25.         }
    
26.         @nth(15) {
    
27.                 @size: 3px 80px;
    
28.                 top: 56px;
    
29.                 background: black;
    
30.                 transform-origin: 1.5px 80px;
    
31.                 transform: rotate(30deg);
    
32.         }
    
33.         @nth(16) {
    
34.                 @size: 4px 60px;
    
35.                 top: 66px;
    
36.                 background: black;
    
37.                 transform-origin: 2px 60px;
    
38.                 transform: rotate(15deg);
    
39.         }
    
40. </css-doodle>
    
41. 
    
42. <script>
    
43.         let script = document.createElement('script');
    
44.         script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
    
45.         document.head.appendChild(script);
    
46. </script>

复制代码

马黑黑

大概有点像而已

南无月

马黑黑 发表于 2023-5-25 21:37
大概有点像而已

它就是个钟表。纯代码写的，太厉害了

红影

16个格子正好都用上了。这个做得很像呢

一斛珠

太腻害了

马黑黑

一斛珠 发表于 2023-5-25 22:14
太腻害了

马黑黑

南无月 发表于 2023-5-25 21:48
它就是个钟表。纯代码写的，太厉害了

以前用CSS+HTML+JS写过真的时钟

马黑黑

醉美水芙蓉 发表于 2023-5-25 22:09
黑黑老师就是厉害！神了！

马黑黑

红影 发表于 2023-5-25 21:55
16个格子正好都用上了。这个做得很像呢

有点像

南无月

马黑黑 发表于 2023-5-25 22:28 以前用CSS+HTML+JS写过真的时钟

:doodle { @size: 200px; border: 6px solid red; border-radius: 50%; @m12(radial-gradient(black 50%, black 0) @plot(r: 1) / 4px 4px no-repeat); } @place: center; position: absolute; @match(i ≤ 12) { :before { content: '@pn(章,‍,‍,‍,马,黑,黑,诺,贝,尔,吹,牛)'; } font-family: '宋体', sans-serif; font-size: 2rem; color: red; transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg)); } @nth(13) { @size: 60px; @shape: star; background: red; }

南无月

马黑黑 发表于 2023-5-25 22:28
以前用CSS+HTML+JS写过真的时钟

时钟样式的小播也有，还用来做过贴子

马黑黑

南无月 发表于 2023-5-25 22:39
时钟样式的小播也有，还用来做过贴子

做过，有过

南无月

马黑黑 发表于 2023-5-25 22:51
做过，有过

那这个会动的也可以做贴子喽

红影

马黑黑 发表于 2023-5-25 22:28
以前用CSS+HTML+JS写过真的时钟

对的，以前做个的，上面还有花潮的拼音呢

马黑黑

红影 发表于 2023-5-26 18:29
对的，以前做个的，上面还有花潮的拼音呢

是的

马黑黑

南无月 发表于 2023-5-26 17:51
那这个会动的也可以做贴子喽

这个做帖子合适吗

红影

马黑黑 发表于 2023-5-26 21:09
是的

记得以前还有个数字表示的，直接显示当前时间和日期。

马黑黑

红影 发表于 2023-5-26 21:34
记得以前还有个数字表示的，直接显示当前时间和日期。

文本显示是最简单的