css-doodle时钟关键帧动画驱动版

马黑黑

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

复制代码

红影

关键帧动画驱动的，就不是每秒移动一格了，而是连续运行了。
这种格式和昨天的那种格式都很好看

红影

这个刻度你取得比前面那个稍许长了点，就看出刻度没转向了，还不如取值小点呢

红影

指针帽取18正好，前面那个20有点大了

看到了两种钟表转动方式，真好，开眼界了

马黑黑

红影 发表于 2023-5-27 09:34
这个刻度你取得比前面那个稍许长了点，就看出刻度没转向了，还不如取值小点呢

刻度是顺着圆环变化角度的，更符合钟表表盘的设计。如果你看不出这个效果，可能与浏览器版本有关。

马黑黑

醉美水芙蓉 发表于 2023-5-27 11:43
很漂亮的时钟！

小辣椒

这三根指针用了渐变效果吧

小辣椒

这时钟更加精细了

梦缘

谢谢老师的代码，您辛苦了。

红影

马黑黑 发表于 2023-5-27 11:40
刻度是顺着圆环变化角度的，更符合钟表表盘的设计。如果你看不出这个效果，可能与浏览器版本有关。

哦，那可能是我浏览器的问题，还以为没转呢

南无月

马黑黑

南无月 发表于 2023-5-27 21:37

再谢茶

南无月

马黑黑 发表于 2023-5-27 21:39
再谢茶

马黑黑

南无月 发表于 2023-5-27 21:40

咋的啦

南无月

马黑黑 发表于 2023-5-27 21:41
咋的啦

乐的啊。茶好喝

马黑黑

红影 发表于 2023-5-27 18:19
哦，那可能是我浏览器的问题，还以为没转呢

css-doodle玩的全是浏览器最新支持的东东

马黑黑

南无月 发表于 2023-5-27 21:45
乐的啊。茶好喝

还行

南无月

马黑黑 发表于 2023-5-27 21:45
还行

行不行都行吧