最纯粹的 CSS 时钟答案

【问题标题】：Most Pure CSS Clock最纯粹的 CSS 时钟
【发布时间】：2017-03-13 06:13:14
【问题描述】：

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

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

我的意思是...我知道如何移动指针，我知道一种显示当前时间的方法（使用 javascript）。但从当前时间开始，我无法移动指针。

我是明确的吗？什么是最好的方法？（我从来没有用过 less 或 sass 或其他的，但我可以试一试。:)）

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

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

【问题讨论】：

您需要 javascript 来获取当前时间。然后要开始动画，您需要为每个小时、分钟和秒显示一个额外的包装器，您可以动态设置正确的旋转以从当前时间开始。您将需要更新 transform:rotate on load 一次。在视觉上，您的动画将从那里开始......
...快速示例codepen.io/anon/pen/OppvBJ
Dynamically changing CSS keyframe values to create a clock的可能重复

标签： css sass less

【解决方案1】：

要使其尽可能“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

【讨论】：

【解决方案2】：

我能做的最好的就是：http://codepen.io/anon/pen/zZZaNY

HTML：

.canvas
  .relogio
    #hora
    #minuto
    #segundo
    .centro

  .shadow
    .shadow-inner

CSS：

body{
  background-color:salmon;
}

.canvas{
  position: relative;
  margin: auto;
  display: block;
  width: 600px; height: 600px;
}

.relogio{
  position:absolute;
  background-color:white;
  width:600px; height:600px;
  border-radius:100%;
  border:25px solid lightsalmon;
  box-sizing: border-box;
}

#hora{
  z-index:3;
  position: absolute;
  width: 0; height: 0;
  border: 20px solid transparent;
  border-bottom: 60px solid darkgray;
  top: calc(45% - 120px); left: calc(50% - 20px);
  transform-origin: 50% 185%;
transform:rotate(12deg);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#hora:after {
  content: '';
  position: absolute;
  left: -20px; top: 60px;
  width: 0; height: 0;
  border: 20px solid transparent;
  border-top: 60px solid salmon;
}

#minuto{
  z-index:2;
  position: absolute;
  width: 0; height: 0;
  border: 20px solid transparent;
  border-bottom: 100px solid lightcoral;
  top: calc(45% - 200px) ; left: calc(50% - 20px);
  transform-origin: 50% 190%;
transform: rotate(6deg);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#minuto:after {
  content: '';
  position: absolute;
  left: -20px; top: 100px;
  width: 0; height: 0;
  border: 20px solid transparent;
  border-top: 100px solid lightcoral;
}

#segundo{
  z-index:1;
  position: absolute;
  width: 2px; height: 45%;
  background-color:darkgray;
  top:5%; left: calc(50% - 1px);
  transform:rotate(1deg);
  transform-origin: 50% 100%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.centro {
  z-index:4;
  height: 5%;
  width: 5%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: salmon;
  border-radius: 100%;
}

.shadow{
  z-index:-1;
  position:absolute;
  width:600px; height:600px;
  transform:translate(0%, 50%);
}
.shadow-inner{
  width:600px; height:600px;
  transform:rotate(-45deg);
  transform-origin: 50% 0%;
  background: black;
  background: -webkit-linear-gradient(gray,transparent); 
  background: -o-linear-gradient(gray,transparent); 
  background: -moz-linear-gradient(gray,transparent); 
  background: linear-gradient(gray,transparent); 
}

JavaScript：

function myFunction() {
  var d = new Date();
  var h = d.getHours();
  var m = d.getMinutes();
  var s = d.getSeconds();
if(h>12){h=h-12;}
    var secAngle = s*6;
  var minAngle = m*6;
  var hourAngle = h*30;


  var segundos = document.getElementById('segundo').style.transform = "rotate(" + secAngle + "deg)";
  var minutos = document.getElementById("minuto").style.transform = "rotate(" + minAngle + "deg)";
    var horas = document.getElementById('hora').style.transform = "rotate(" + hourAngle + "deg)";
}
window.onload=function(){
myFunction();
setInterval(myFunction,1000);
}
$(document).ready(myFunction());

【讨论】：