论坛 › 马黑黑教程专版 › css-doodle时钟关键帧动画驱动版

马黑黑 发表于 2023-5-27 08:40

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

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

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

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

红影 发表于 2023-5-27 09:34

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

红影 发表于 2023-5-27 09:36

指针帽取18正好，前面那个20有点大了{:4_173:}

看到了两种钟表转动方式，真好，开眼界了{:4_199:}

马黑黑 发表于 2023-5-27 11:40

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

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

醉美水芙蓉 发表于 2023-5-27 11:43

马黑黑 发表于 2023-5-27 12:16

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

{:4_190:}

小辣椒 发表于 2023-5-27 13:27

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

小辣椒 发表于 2023-5-27 13:28

这时钟更加精细了{:4_199:}

梦缘 发表于 2023-5-27 16:20

谢谢老师的代码，您辛苦了。{:4_180:}

红影 发表于 2023-5-27 18:19

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

哦，那可能是我浏览器的问题，还以为没转呢{:4_173:}

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

{:4_190:}{:4_187:}

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

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


再谢茶

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

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

{:4_170:}

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

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


咋的啦

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

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

乐的啊。茶好喝

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

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

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

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

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

还行

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

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

行不行都行吧

查看完整版本: css-doodle时钟关键帧动画驱动版