<head>
<meta charset="utf-8">
<title>css clock</title>
<style id="clock-animations"></style>
</head>
<body>
<div class="clock-wrapper">
<div class="clock-base">
<div class="clock-dial">
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
</div>
<div class="clock-hour"></div>
<div class="clock-minute"></div>
<div class="clock-second"></div>
<div class="clock-center"></div>
</div>
</div>
</body>html,body{
height: 100%;
margin: 0;
padding: 0;
background-image:linear-gradient(#e7e7e7,#d7d7d7);
}
.clock-wrapper{
position: absolute;
top: 50%;
right: 0;
bottom: 50%;
left: 0;
width: 250px;
height: 250px;
margin: auto;
padding: 5px;
background-image: linear-gradient(#f7f7f7,#e0e0e0);
border-radius: 50%;
box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);
}
.clock-base{
width: 250px;
height: 250px;
background-color: #eee;
border-radius: 50%;
box-shadow: 0 0 5px #eee;
}
.clock-dial {
position: absolute;
z-index: 1;
top: 15px;
left: 15px;
width: 230px;
height: 230px;
}
.clock-dial .clock-indicator {
position: absolute;
width: 2px;
height: 4px;
margin: 113px 114px;
background-color: #ddd;
}
.clock-indicator:nth-child(1) {
transform: rotate(30deg) translateY(-113px);
}
.clock-indicator:nth-child(2) {
transform: rotate(60deg) translateY(-113px);
}
.clock-indicator:nth-child(3) {
transform: rotate(90deg) translateY(-113px);
background-color: #aaa;
}
.clock-indicator:nth-child(4) {
transform: rotate(120deg) translateY(-113px);
}
.clock-indicator:nth-child(5) {
transform: rotate(150deg) translateY(-113px);
}
.clock-indicator:nth-child(6) {
transform: rotate(180deg) translateY(-113px);
background-color: #aaa;
}
.clock-indicator:nth-child(7) {
transform: rotate(210deg) translateY(-113px);
}
.clock-indicator:nth-child(8) {
transform: rotate(240deg) translateY(-113px);
}
.clock-indicator:nth-child(9) {
transform: rotate(270deg) translateY(-113px);
background-color: #aaa;
}
.clock-indicator:nth-child(10) {
transform: rotate(300deg) translateY(-113px);
}
.clock-indicator:nth-child(11) {
transform: rotate(330deg) translateY(-113px);
}
.clock-indicator:nth-child(12) {
transform: rotate(360deg) translateY(-113px);
background-color: #c00;
}
.clock-hour{
position: absolute;
z-index: 2;
top: 80px;
left: 128px;
width: 4px;
height: 65px;
background-color: #555;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 2px 50px;
transition: .5s;
animation: rotate-hour 43200s linear infinite;
animation: rotate-hour 43200s linear infinite;
}
.clock-minute{
position: absolute;
z-index: 3;
top: 60px;
left: 128px;
width: 4px;
height: 85px;
background-color: #555;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 2px 70px;
transition: .5s;
animation: rotate-minute 3600s linear infinite;
animation: rotate-minute 3600s linear infinite;
}
.clock-second{
position: absolute;
z-index: 4;
top: 20px;
left: 129px;
width: 2px;
height: 130px;
background-color: #a00;
box-shadow: 0 0 2px rgba(0,0,0,.2);
transform-origin: 1px 110px;
transition: .5s;
animation: rotate-second 60s linear infinite;
animation: rotate-second 60s linear infinite;
}
.clock-second:after{
content: "";
display: block;
position: absolute;
left: -5px;
bottom: 14px;
width: 8px;
height: 8px;
background-color: #a00;
border: solid 2px #a00;
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.clock-center{
position: absolute;
z-index: 1;
width: 150px;
height: 150px;
top: 55px;
left: 55px;
background-image: linear-gradient(#e3e3e3,#f7f7f7);
border-radius: 50%;
box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
}
.clock-center:after{
content: "";
display: block;
width: 20px;
height: 20px;
margin: 65px;
background-color: #ddd;
border-radius: 50%;
}(function(){
//generate clock animations
var now = new Date(),
hourDeg = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
secondDeg = now.getSeconds() / 60 * 360,
stylesDeg = [
"@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
"@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}",
"@-moz-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
"@-moz-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
"@-moz-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
].join("");
document.getElementById("clock-animations").innerHTML = stylesDeg;
})();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.