css - 最纯粹的 CSS 时钟

标签 css sass less

我正在学习如何创建纯 CSS 对象。 此时此刻,我正在创建一个模拟时钟。

问题是:用当前时间创建这个时钟的最纯粹的方法是什么。

我的意思是...我知道如何移动指针,我知道(使用 javascript)显示当前小时的方法。但我无法移动从当前时间开始的指针。

我是露骨的吗?什么是最好的方法? (我从来没有用过 less 或 sass 或其他,但我可以试一试。:) )

这是我在 codepen 中的代码:codepen.io/AlexandraCardoso/pen/ZeQdxg

感谢您的帮助,对于任何英文错误,我们深表歉意。

最佳答案

要尽可能使其成为“CSS”,您可以使用 CSS 变量——这样您只需要实例化时钟并让 CSS 处理动画

//  set current time on load
const now = new Date()
const docStyle = document.documentElement.style;
docStyle.setProperty('--seconds', now.getSeconds());
docStyle.setProperty('--minutes', now.getMinutes());
docStyle.setProperty('--hours',   now.getHours());

这是一个简单的假人 http://codepen.io/jakob-e/pen/pePMzE

关于css - 最纯粹的 CSS 时钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42718765/

相关文章:

javascript - 多个 CSS 动画对齐问题

html - 有没有办法让 HTML 选项卡容器将其高度固定为其最高选项卡的高度?

javascript - 为什么 Firefox CPU 使用率在更改某些 div 的宽度和左侧坐标的幻灯片开始后立即跳到 100%?

html - 使用 Sass CSS 和 FlexBox 垂直堆叠转换后的文本

css - 无法使 Bootstrap 渐变起作用

css - 更少的 css 编译器。无法使用变暗属性

css - 这行 CSS 的作用是什么?

css - 如何在不使用 z-index 的情况下将一个元素隐藏在另一个元素下

css - 如何使用 sass/css 将 div 的宽度设置为等于另一个 div?

node.js - 我们如何使用 NPM 将 Lesscss 升级到 Windows 中的最新版本?