ほとんどの純粋なCSS時計

Question

純粋なCSSオブジェクトを作成する方法を学習しています。 この瞬間、私はアナログ時計を作ります。

質問は、現在の時間でこの時計を作成する最も純粋な方法は何ですか。

私は手を動かす方法を知っています、私は現在の時間を表示する方法を（javascriptで）知っています。しかし、私は現在の時間から手を動かすことはできません。

私は明示的でしたか？最善の方法は何ですか？ （私は小さいかSASSまたは別のもの使用されることはありませんが、私はそれを試してみることができます:)。）

ここ

はcodepenで私のコードです：codepen.io/AlexandraCardoso/pen/ZeQdxg

おかげであなたの助けのために英語のエラーについてはごめんなさい。

Answer 1

私は何ができる最善のはこれです：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

CSS」としてそれを作るために"可能な限りCSS V ariables - あなただけの時計をインスタンス化し、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()); 

を扱うようにする必要があり、この方法は、あなたが現在の時刻を取得するためにはJavaScriptを必要とし、単純なダミーhttp://codepen.io/jakob-e/pen/pePMzE