我正在学习如何创建纯 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/