论坛 › 马黑黑教程专版 › 让css-doodle时钟走起来

马黑黑 发表于 2023-5-26 07:28

让css-doodle时钟走起来

<css-doodle grid="4" id="myClock">
        :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)); } }
</css-doodle>

<p><br><br><br><br><br><br><br</p>

<script>
(function() {
        let script = document.createElement('script');
        script.src = '/css-doodle.min.js';
        document.head.appendChild(script);

        let now = new Date();
        let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
                min = now.getMinutes(),
                sec = now.getSeconds(),
                msec = now.getMilliseconds();
        let hDeg = hr * 30 + (min * 6 / 12),
                mDeg = min * 6 + (sec * 6 / 60),
                sDeg = sec * 6 + (msec * 0.36 / 1000);

        myClock.style.setProperty('--hDeg', hDeg + 'deg');
        myClock.style.setProperty('--mDeg', mDeg + 'deg');
        myClock.style.setProperty('--sDeg', sDeg + 'deg');
})();
</script>

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

代码
<css-doodle grid="4" id="myClock">
        :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)); } }
</css-doodle>

<script>
(function() {
        let script = document.createElement('script');
        script.src = '/css-doodle.min.js';
        document.head.appendChild(script);

        let now = new Date();
        let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
                min = now.getMinutes(),
                sec = now.getSeconds(),
                msec = now.getMilliseconds();
        let hDeg = hr * 30 + (min * 6 / 12),
                mDeg = min * 6 + (sec * 6 / 60),
                sDeg = sec * 6 + (msec * 0.36 / 1000);

        myClock.style.setProperty('--hDeg', hDeg + 'deg');
        myClock.style.setProperty('--mDeg', mDeg + 'deg');
        myClock.style.setProperty('--sDeg', sDeg + 'deg');
})();
</script>

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

思路：

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

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

亦是金 发表于 2023-5-26 09:18

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

红影 发表于 2023-5-26 10:30

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

红影 发表于 2023-5-26 10:31

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

梦油 发表于 2023-5-26 11:12

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

醉美水芙蓉 发表于 2023-5-26 11:46

马黑黑 发表于 2023-5-26 12:55

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

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

马黑黑 发表于 2023-5-26 12:56

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

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

马黑黑 发表于 2023-5-26 12:56

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

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

马黑黑 发表于 2023-5-26 12:57

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

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

马黑黑 发表于 2023-5-26 12:58

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

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

梦油 发表于 2023-5-26 16:31

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

你真行！走时很准。

焱鑫磊 发表于 2023-5-26 17:22

黑黑老师真厉害，赞赞赞！！！{:4_187:}{:4_187:}{:4_187:}

南无月 发表于 2023-5-26 17:59

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

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


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

红影 发表于 2023-5-26 18:58

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

嗯嗯，黑黑厉害，什么都能做出来{:4_199:}

红影 发表于 2023-5-26 18:59

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

是的，用不同的方式，得到了一样的效果{:4_187:}

马黑黑 发表于 2023-5-26 21:07

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

殊途同归

马黑黑 发表于 2023-5-26 21:07

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

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

查看完整版本: 让css-doodle时钟走起来