Animated Clock

Developer
Yang Li
Size
1,743 Kb
Views
40,480
  1. Animated Clock Previews
  2. Animated Clock HTML Codes
  3. Animated Clock CSS Codes

How do I make an animated clock?

What is a animated clock? How do you make a animated clock? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.

Animated Clock Previews
IQ Test

Animated Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="clock"> <div id="seconds"> <img src="http://www.deltatwatch.com/Pic/Clock/secondHand.png" alt="" /> </div> <div id="minutes"> <img src="http://paulrhayes.com/experiments/clock/images/minuteHand.png" alt="" /> </div> <div id="hours"> <img src="http://paulrhayes.com/experiments/clock/images/hourHand.png" alt="" /> </div>
</div>
</body>
</html>

Animated Clock - Script Codes CSS Codes

img { width: 100%; height: 100%;
}
#clock { background-color: grey; background-image: url("http://www.clipartbest.com/cliparts/pc5/eMA/pc5eMAaBi.png"); height: 600px; width: 600px; position: relative; animation: changeColor 60s infinite linear;
}
#seconds, #minutes, #hours { width: 100%; height: 100%; position: absolute; left: 0; top: 0;
}
@keyframes rotate { 100% {transform: rotate(360deg);}
}
#hours { animation: rotate 43200s infinite linear;
}
#minutes { animation: rotate 3600s infinite linear;
}
#seconds { animation: rotate 60s infinite linear;
}
@keyframes changeColor { 0% {background-color: grey;} 25% {background-color: lightgreen;} 50% {background-color: lightblue;} 75% {background-color: lightred;} 100% {background-color: grey;}
}
Animated Clock - Script Codes
Animated Clock - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded July 13, 2022
Rating 3
Size 1,743 Kb
Views 40,480
Do you need developer help for Animated Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yang Li (aussieyang) Script Codes
Name
My Friends Starter
Battleships Starter
Goalkeeper
Simple Hamburger Menu
Sunny Day Driving Starter
Highlight Me Starter
Click Me, Name Me
Fellowship of the Ring
Responding Boxes
Birthday Party Starter
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!