I had absolutely no idea how cool CSS could be until I looked around and found a few things to play with. Here we take a look at faking div's to look like a clock face & making the hands turn.
First a bit of html to create containers to style with.
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="clock">
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
First, we'll create a circle to act as our clock's "face".
#clock{
border: solid black 10px;
border-radius: 50%;
height: 20em;
width: 20em;
position: relative;
}
Next we can stack each container for the clock's "hands" on each other above the clock face.
.minutes-container, .hours-container, .seconds-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
With each hand, we can change the styling gently to make each div a slightly different shape, mimicking the clock's hands.
.hours {
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes {
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds {
background: #000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 80%;
width: 1%;
z-index: 8;
}
Now that we have our hands, we can use one keyframe to move the hands around 360 degrees.
@keyframes rotate {
100% {
transform: rotateZ(360deg);
}
}
.hours-container {
animation: rotate 43200s infinite linear;
}
.minutes-container {
animation: rotate 3600s infinite linear;
}
.seconds-container {
animation: rotate 60s infinite linear;
}
...and presto! Our clock is moving with the hands adjusting for one hour as they move around the clock. With a bit of javascript we can get the hands to point at the correct time.
function clockStart() {
var date = new Date;
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
var hands = [
{
hand: 'hours',
angle: (hours * 30) + (minutes / 2)
},
{
hand: 'minutes',
angle: (minutes * 6)
},
{
hand: 'seconds',
angle: (seconds * 6)
}
];
for (var j = 0; j < hands.length; j++) {
var elements = document.querySelectorAll('.' + hands[j].hand);
for (var k = 0; k < elements.length; k++) {
elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
if (hands[j].hand === 'minutes') { elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);}
}
}
}
clockStart();
Iterating through the hands we can set their angle dynamically with the #style method for each element.
A far cry from just fonts and borders, CSS is indeed a powerful tool for front end development.
Top comments (0)