CSS animated clock

  Bài viết hay nhất1
HTML (Haml):

.settings
Scale
%input.scale{:type => "number", :value => "2", :step => "0.1", :min => "0.1"}

.clock
.time_3 iii
.time_6 vi
.time_9 ix
.time_12 xii
.minute_start
.minute
.hour_start
.hour
.second_start
.second



CSS:

* {
box-sizing: border-box;
}

html, body {
background: #545454;
padding: 0;
margin: 0 0.5em;
overflow: hidden;
}

.settings {
position: absolute;
top: 0;
right: 0;
padding: 0.25em;
color: #eee;
text-shadow: 1px 1px 0 #000;
}
.scale {
width: 4em;
padding: 0.25em;
border: none;
}

/* The clock face */
.clock {
font-size: 2em;
font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
font-weight: bold;
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
width: 10em;
height: 10em;
border-radius: 5em 5em;
background: #fff;
box-shadow: inset 0 0 2em #545454,
0 0 2em #000;
}

/* Numerals on clock face */
[class^="time_"] {
display: block;
position: absolute;
width: 2em;
text-align: center;
text-transform: uppercase;
}
.time_3 {
top: 4.5em;
left: 7.5em;
text-align: right;
}
.time_6 {
top: 8.5em;
left: 4em;
}
.time_9 {
top: 4.5em;
left: 0.5em;
text-align: left;
}
.time_12 {
top: 0.5em;
left: 4em;
}

/* Wrappers used for animations */
.hour_start, .minute_start, .second_start,
.hour, .minute, .second {
position: absolute;
width: 10em;
height: 10em;
}

/* The clock hands */
.hour::after, .minute::after, .second::after {
content: "";
display: block;
margin: 0 auto;
width: 0.25em;
height: 5em;
background: #000;
box-shadow: 0 0 0.25em #545454;
}
.hour::after {
margin-top: 2em;
height: 3em;
}
.second::after {
width: 0.125em;
background: #f00;
}

/* What makes the clock tick... */
.hour {
animation: rotate 43200s linear infinite;
}
.minute {
animation: rotate 3600s linear infinite;
}
.second {
animation: rotate 60s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}



JS:

// Set the current time
(function() {
function rotate(selector, deg) {
var el = document.querySelector(selector);
el.style.webkitTransform = 'rotate('+deg+'deg)';
el.style.transform = 'rotate('+deg+'deg)';
}
var now = new Date();
var h=now.getHours();
h=(h>11)?h-12:h;
var m=now.getMinutes();
var s=now.getSeconds();
rotate('.hour_start', ((h*3600+m*60+s)/43200*360));
rotate('.minute_start', ((m*60+s)/3600*360));
rotate('.second_start', (s/60*360));
}
)();

// Scaling the clock is easy since it uses em's for sizing
document.querySelector('.scale').onchange = function() {
document.querySelector('.clock').style.fontSize = document.querySelector('.scale').value+'em';
};
Bạn không có quyền trả lời bài viết