Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a Water💦 Clock Design. To create this animation we will use HTML, CSS and JavaScript. We do not make use of any images, icons or external libraries and plugins to create this animation.
As I have mentioned in my tutorials before, this kind of complicated animation hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.
This is a simple clock animation that looks like a water ball. It is made using HTML, CSS and a little bit of JavaScript. You can use this type of animation on the loading page, which will make the loading page attractive. An extension called "Klak - New Tab" has been created using this water clock design. You can search for that extension in the Chrome Web Store if you want. "Klak - New Tab" are many other themes based on this design.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Clock Animation’. Inside this folder, we have one files. These files are – index.html. The file is the HTML document.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Water💦 Clock Design | Codehemu</title>
<link href="https://www.codehemu.com/favicon.ico" rel="icon" type="image/x-icon">
<style>
body {
margin: 0;
padding: 0;
background: #4f4f4f;
}
.container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
height: 100vh;
background: transparent;
}
.time {
width: 400px;
height: 200px;
font-size: 130px;
text-align: center;
font-family: cursive;
color: #f0f6f9;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.waterlayer_a {
width: 465px;
height: 465px;
position: absolute;
top: 50%;
background: #03a9f4;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50% 35% 40% 37%;
animation: spin 10s linear infinite;
}
.waterlayer_b {
width: 465px;
height: 465px;
position: absolute;
background: #03a9f4;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 40% 35% 50% 30%;
animation: spin 5s linear infinite;
}
.waterlayer_c {
width: 465px;
height: 465px;
position: absolute;
border-radius: 50%;
background: #03a9f4;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
@keyframes spin {
0% {
transform: translate(-50%,-50%)rotate(0deg);
}
100% {
transform: translate(-50%,-50%)rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="waterlayer_a"></div>
<div class="waterlayer_b"></div>
<div class="waterlayer_c"></div>
<div class="time">00:00</div>
</div>
<script>
function clock() {
const date = new Date();
const hours = ((date.getHours() + 11) % 12 + 1);
const minutes = date.getMinutes();
const hour = hours * 30;
const minute = minutes * 6;
var h = date.getHours();
var m = date.getMinutes();
if (h < 10)
h = '0' + h;
if (m < 10)
m = '0' + m;
document.querySelector(".time").innerText = h + ":" + m;
}
setInterval(clock, 1000);
</script>
</body>
</html>
HTML Overall Structure
The stylesheet is included in the head tag. So there is no need to create a separate style.css file. There is no need to create a JavaScript file because JavaScript is already included. This animation is done with the help of the StyleSheet @keyframes. A @keyframes called spin has been rotating the elements. With the help of Javascript, the update time is being added to <div class="time">00:00</div> element every second.
This animation works on all browsers, Because moz and webkit (CSS) was not used.
That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. And if you have any feedback or reports about the "Klak - New Tab" extension, you can contact us using the form below. Happy Coding!
إرسال تعليق