让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); --sDeg: 0deg; --mDeg: 0; hDeg: 0; } @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: red; } @nth(16) { @size: 2px 100px; top: 60px; background: rgba(200,0,0,.8); transform-origin: 1px 84px; transform: rotate(var(--sDeg)); animation: sRot 60s infinite linear; } @nth(15) { @size: 3px 80px; top: 56px; background: black; transform-origin: 1.5px 80px; transform: rotate(var(--mDeg)); animation: mRot 3600s infinite linear; } @nth(14) { @size: 4px 60px; top: 66px; background: black; transform-origin: 1.5px 60px; transform: rotate(var(--hDeg)); animation: hRot 43200s infinite linear; } @keyframes sRot{ to { transform: rotate(calc(var(--sDeg) + 360deg)); } } @keyframes mRot{ to { transform: rotate(calc(var(--mDeg) + 360deg)); } } @keyframes hRot{ to { transform: rotate(calc(var(--hDeg) + 360deg)); } }

马黑黑

代码

1. <css-doodle grid="4" id="myClock">
   
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.                 --sDeg: 0deg; --mDeg: 0; hDeg: 0;
   
8.         }
   
9.         @place: center;
   
10.         position: absolute;
    
11.         @match(i ≤ 12) {
    
12.                 :before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
    
13.                 transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));
    
14.         }
    
15.         @nth(13) {
    
16.                 @size: 10px;
    
17.                 @shape: circle;
    
18.                 background: red;
    
19.         }
    
20.         @nth(16) {
    
21.                 @size: 2px 100px;
    
22.                 top: 60px;
    
23.                 background: rgba(200,0,0,.8);
    
24.                 transform-origin: 1px 84px;
    
25.                 transform: rotate(var(--sDeg));
    
26.                 animation: sRot 60s infinite linear;
    
27.         }
    
28.         @nth(15) {
    
29.                 @size: 3px 80px;
    
30.                 top: 56px;
    
31.                 background: black;
    
32.                 transform-origin: 1.5px 80px;
    
33.                 transform: rotate(var(--mDeg));
    
34.                 animation: mRot 3600s infinite linear;
    
35.         }
    
36.         @nth(14) {
    
37.                 @size: 4px 60px;
    
38.                 top: 66px;
    
39.                 background: black;
    
40.                 transform-origin: 1.5px 60px;
    
41.                 transform: rotate(var(--hDeg));
    
42.                 animation: hRot 43200s infinite linear;
    
43.         }
    
44.         @keyframes sRot{ to { transform: rotate(calc(var(--sDeg) + 360deg)); } }
    
45.         @keyframes mRot{ to { transform: rotate(calc(var(--mDeg) + 360deg)); } }
    
46.         @keyframes hRot{ to { transform: rotate(calc(var(--hDeg) + 360deg)); } }
    
47. </css-doodle>
    
48. 
    
49. <script>
    
50. (function() {
    
51.         let script = document.createElement('script');
    
52.         script.src = '/css-doodle.min.js';
    
53.         document.head.appendChild(script);
    
54. 
    
55.         let now = new Date();
    
56.         let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
    
57.                 min = now.getMinutes(),
    
58.                 sec = now.getSeconds(),
    
59.                 msec = now.getMilliseconds();
    
60.         let hDeg = hr * 30 + (min * 6 / 12),
    
61.                 mDeg = min * 6 + (sec * 6 / 60),
    
62.                 sDeg = sec * 6 + (msec * 0.36 / 1000);
    
63. 
    
64.         myClock.style.setProperty('--hDeg', hDeg + 'deg');
    
65.         myClock.style.setProperty('--mDeg', mDeg + 'deg');
    
66.         myClock.style.setProperty('--sDeg', sDeg + 'deg');
    
67. })();
    
68. </script>

复制代码

马黑黑

思路：

① 使用三个CSS关键帧动画分别驱动时针、分针、秒针；
② JS获得启动时钟时的时间，并将时、分、秒换算成对应指针旋转角度，赋值给对应的CSS变量。

时钟不够精致，当前主要精力放在基本功能的实现。

亦是金

问好马黑黑老师！神奇的代码，欣赏收藏学习备用。

红影

不但能走起来，而且和当前时间是一样的。这个太厉害了

红影

记得黑黑以前也做过一个时钟，现在又用新方法做了一个呢

梦油

太棒了，太棒了。把它安在“签名”里多好啊。

马黑黑

亦是金 发表于 2023-5-26 09:18
问好马黑黑老师！神奇的代码，欣赏收藏学习备用。

这个还不成熟，属于初稿性质，有空需要慢慢雕琢

马黑黑

醉美水芙蓉 发表于 2023-5-26 11:46
和现在时间一样，老师真厉害！

和你所使用的电脑的时间一样

马黑黑

红影 发表于 2023-5-26 10:30
不但能走起来，而且和当前时间是一样的。这个太厉害了

走时原理和以前做的时钟一样的，这里只是使用css-doodle来做界面而已

马黑黑

梦油 发表于 2023-5-26 11:12
太棒了，太棒了。把它安在“签名”里多好啊。

这个也行行不通：签名档可能不支持

马黑黑

红影 发表于 2023-5-26 10:31
记得黑黑以前也做过一个时钟，现在又用新方法做了一个呢

仅在界面的实现方面不同吧

梦油

马黑黑 发表于 2023-5-26 12:57
这个也行行不通：签名档可能不支持

你真行！走时很准。

焱鑫磊

黑黑老师真厉害，赞赞赞！！！

南无月

马黑黑 发表于 2023-5-26 07:34
思路：

① 使用三个CSS关键帧动画分别驱动时针、分针、秒针；

这个实用性满满。
突然感觉十分亲切，不光光是代码了

红影

马黑黑 发表于 2023-5-26 12:56
走时原理和以前做的时钟一样的，这里只是使用css-doodle来做界面而已

嗯嗯，黑黑厉害，什么都能做出来

红影

马黑黑 发表于 2023-5-26 12:58
仅在界面的实现方面不同吧

是的，用不同的方式，得到了一样的效果

马黑黑

红影 发表于 2023-5-26 18:59
是的，用不同的方式，得到了一样的效果

殊途同归

马黑黑

红影 发表于 2023-5-26 18:58
嗯嗯，黑黑厉害，什么都能做出来

也不是什么都能做出来，能做出的做得出，不能的做不出