Simple Clock--CSS3

Here we use the CSS3 feature to create a simple clock with the following code:

<! DOCTYPE html>


<meta charset= "UTF-8" >
<title></title>
<style>
. clock{
position:relative;
Background:url (.. /IMG/IOS_CLOCK.SVG) No-repeat Center;
width:300px;
height:300px;
}
. clock::after{
Content: "";
width:10px;
height:10px;
background:red;
Position:absolute;
left:150px;
top:150px;
Transform:translatex ( -50%) Translatey (-50%);
border-radius:50%;

}

. hour{
width:10px;
height:60px;
Background:deepskyblue;
Position:absolute;
left:145px;
top:90px;
transform-origin:50% 100%;
Animation:cycle 43200 linear Infinite;
}

. minute{
width:8px;
height:80px;
background:red;
Position:absolute;
left:146px;
top:70px;
transform-origin:50% 100%;
Animation:cycle 3600s linear Infinite;
}

. second{
width:4px;
height:120px;
Background:purple;
Position:absolute;
left:148px;
top:50px;
transform-origin:50% 80%;
animation:cycle 60s linear infinite;

}

@keyframes cycle{
100%{
Transform:rotatez (360DEG);
}
}

. Bb{position:absolute;
top:400px;}
</style>

<body>
<div class= "Clock" >
<div class= "Hour" ></div>
<div class= "Minute" ></div>
<div class= "Second" ></div>
</div>
<div id= "BB" >ssss</div>
<script>
Window.onload=function () {
var day = new Date ();
var hour=day.gethours ()
var minute=day.getminutes ();
var second=day.getseconds ();

var second1=second*6;
var minute1=minute*6+second*0.5
var hour1= (hour%12) *30+minute*0.5

var bb=document.getelementbyid ("BB");
bb.innerhtml=hour1+ "" +minute1+ "" +second1
//

var h=document.getelementsbyclassname ("Hour")
var m=document.getelementsbyclassname ("Minute")
var s=document.getelementsbyclassname ("second")
H[0].style.transform= ' Rotatez (' +hour1+ ' deg) '
M[0].style.transform= ' Rotatez (' +minute1+ ' deg) '
S[0].style.transform= ' Rotatez (' +second1+ ' deg) '


}

</script>
</body>

In addition to the clock disc is the background picture, the other is no problem. It also seems to be possible, a friend with obsessive-compulsive disorder can draw one himself with Cavas.

Simple Clock--CSS3