Pure CSS Animated Clock
How do I make an pure css animated clock?
Pure CSS Animated Clock experiment.. What is a pure css animated clock? How do you make a pure css animated clock? This script and codes were developed by Jay Salvat on 13 July 2022, Wednesday.
Pure CSS Animated Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Animated Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="clock"> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div>
</div>
<h1>Pure CSS Animated Clock</h1> <script src="js/index.js"></script>
</body>
</html>
Pure CSS Animated Clock - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Pacifico);
html { width: 100%; height: 100%; padding: 5% 0; background: -webkit-linear-gradient(#e4f2e7, #FFF); background: linear-gradient(#e4f2e7, #FFF);
}
h1 { margin: 0; font: 3em 'Pacifico', cursive; text-align: center; text-shadow: 0 2px 0 #fff; color: #B0DAB9;
}
#clock { box-sizing: border-box; width: 225px; height: 225px; border: 35px solid #B0DAB9; border-radius: 50%; margin: 0 auto; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
#clock:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; background: black; border: 12px solid #B0DAB9; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#hours, #minutes, #seconds { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
#hours:after, #hours:after, #hours:after, #minutes:after, #minutes:after, #minutes:after, #seconds:after, #seconds:after, #seconds:after { content: ""; display: block; margin: 50% 50%; width: 50%; -webkit-transform-origin: left top; transform-origin: left top; -webkit-animation: clock linear infinite; animation: clock linear infinite;
}
#hours:after { width: 30%; outline: 8px solid #B0DAB9; -webkit-animation-duration: 86400s; animation-duration: 86400s;
}
#minutes:after { width: 40%; outline: 4px solid #B0DAB9; -webkit-animation-duration: 3600s; animation-duration: 3600s;
}
#seconds:after { width: 48%; outline: 2px solid #B0DAB9; -webkit-animation-duration: 60s; animation-duration: 60s;
}
@-webkit-keyframes clock { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes clock { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
Pure CSS Animated Clock - Script Codes JS Codes
/* * (almost) Pure Animated CSS Clock * * Need standard CSS? * * Click the Eye icon at the top right * corner of the CSS panel in order to * copy/paste the compiled CSS. * * Jay S. * www.jaysalvat.com */
/* Javacript to set the time once */
set('hours', 30 * new Date().getHours());
set('minutes', 6 * new Date().getMinutes());
set('seconds', 10 * new Date().getSeconds());
function set(id, deg) { var el = document.getElementById(id), rotation = 'rotate(' + deg + 'deg)'; el.style.transform = rotation; el.style.webkitTransform = rotation;
}
Developer | Jay Salvat |
Username | jaysalvat |
Uploaded | July 13, 2022 |
Rating | 3.5 |
Size | 3,140 Kb |
Views | 60,720 |
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!
Name | Size |
JQuery like selection helper | 2,384 Kb |
HTML5 Breakout | 4,873 Kb |
A Pen by Jay Salvat | 1,654 Kb |
Buzz - react 1 | 2,705 Kb |
Ken Burns effect with Vegas 2 | 3,334 Kb |
Easy Face Detection with jQuery | 63,612 Kb |
3 state pure CSS animated 3D button | 3,255 Kb |
Apple watch like Mickey watch | 26,341 Kb |
HTM5 picture dropzone | 2,576 Kb |
Buzz - react 2 | 2,658 Kb |
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!
Name | Username | Size |
A Pen by MurabitoB | MurabitoB | 4,421 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
Flex layout example | Mofny | 1,663 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!