Question

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

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

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

我是明确的吗？什么是最好的方法？（我从来没用过少或少或另一个，但我可以尝试一下。:)）

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

感谢您的帮助，并对任何英语错误感到抱歉。

Answer 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

Answer 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());

大多数纯CSS时钟

2 个答案: