Most Pure CSS Clock

Question

Ich lerne, wie man reine CSS-Objekte erstellt. In diesem Moment erstelle ich eine analoge Uhr.

Die Frage ist: Was ist die meist reine Art, diese Uhr mit der aktuellen Stunde zu erstellen.

Ich meine ... Ich weiß, wie man die Hände bewegt, ich kenne einen Weg (mit Javascript), um die aktuelle Stunde anzuzeigen. Aber ich kann die Hände ab der aktuellen Stunde nicht bewegen.

War ich explizit? Was ist der beste Weg? (Ich habe nie weniger oder sass oder ein anderes verwendet, aber ich kann es versuchen :).)

Hier ist mein Code in codepen: codepen.io/AlexandraCardoso/pen/ZeQdxg

Vielen Dank für Ihre Hilfe und sorry über jeden englischen Fehler.

Answer 1

Das Beste, was ich tun könnte, ist dies: 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()); 

Answer 2

Um es als „CSS zu machen "Wie möglich könnten Sie CSS V verwenden ariables - auf diese Weise nur die Uhr instanziiert benötigen und lassen Sie CSS ist die Animation handhaben

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

Hier ist eine einfache Attrappe http://codepen.io/jakob-e/pen/pePMzE