CSS3 Working Clock

Developer

Size

4,462 Kb

Views

14,168

CSS3 Working Clock Previews
CSS3 Working Clock HTML Codes
CSS3 Working Clock CSS Codes
CSS3 Working Clock JS Codes

How do I make an css3 working clock?

Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript.This is now available on GitHub @ https://github.com/iliadraznin/CSS3clock. What is a css3 working clock? How do you make a css3 working clock? This script and codes were developed by Julien Lepoivre on 02 October 2022, Sunday.

CSS3 Working Clock Previews

CSS3 Working Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Working Clock</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-size:62.5%; margin:1em; background-color: #F0F2F5; }
ul { list-style:none; margin:0; padding:0 }
#watch { font-size:1em; position:relative }
#watch .frame-face { position:relative; width:30em; height:30em; margin:2em auto;
}
#watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#watch .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#watch .digits li:nth-child(12) { transform:translate(0, -8em) }
#watch .digits:before { content:''; width:1.6em; height:1.6em; border-radius:.8em; position:absolute; top:50%; left:50%; margin:-.8em 0 0 -.8em; background:#121314;
}
@keyframes hours { to {transform:rotate(335deg)} }
#watch .hours-hand { width:.8em; height:7em; border-radius:.9em .9em .9em .9em; background:#232425; position:absolute; bottom:50%; left:50%; margin:0 0 -.8em -.4em; box-shadow:#232425 0 0 2px; transform-origin:0.4em 6.2em; transform:rotate(-25deg); animation:hours 43200s linear 0s infinite;
}
@keyframes minutes { to {transform:rotate(422deg)} }
#watch .minutes-hand { width:.8em; height:12.5em; border-radius:.5em; background:#343536; position:absolute; bottom:50%; left:50%; margin:0 0 -1.5em -.4em; box-shadow:#343536 0 0 2px; transform-origin:0.4em 11em; transform:rotate(62deg); animation:minutes 3600s linear 0s infinite;
}
@keyframes seconds { to {transform:rotate(480deg)} }
#watch .seconds-hand { width:.2em; height:14em; border-radius:.1em .1em 0 0/10em 10em 0 0; background:#c00; position:absolute; bottom:50%; left:50%; margin:0 0 -2em -.1em; box-shadow:rgba(0,0,0,.8) 0 0 .2em; transform-origin:0.1em 12em; transform:rotate(120deg); animation:seconds 60s steps(60, end) 0s infinite;
}
#watch .digital-wrap { width:9em; height:3em; border:.1em solid #222; border-radius:.2em; position:absolute; top:50%; left:50%; margin:3em 0 0 -4.5em; overflow:hidden; background:#4c4c4c; background:-webkit-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%); background:-moz-linear-gradient(top, #4c4c4c 0%, #0f0f0f 100%); background:-ms-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%); background:-o-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%); background:linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);
}
#watch .digital-wrap ul { float:left; width:2.85em; height:3em; border-right:.1em solid #000; color:#ddd; font-family:Consolas, monaco, monospace;
}
#watch .digital-wrap ul:last-child { border:none }
#watch .digital-wrap li { font-size:1.5em; line-height:2; letter-spacing:2px; text-align:center; position:relative; left:1px;
}
#watch .digit-minutes li { animation:dsm 3600s steps(60, end) 0s infinite;
}
#watch .digit-seconds li { animation:dsm 60s steps(60, end) 0s infinite;
}
@keyframes dsm { to { transform:translateY(-120em) }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="watch"> <div class="frame-face"></div> <div class="hours-hand"></div> <div class="minutes-hand"></div> <div class="seconds-hand"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS3 Working Clock - Script Codes CSS Codes

body { font-size:62.5%; margin:1em; background-color: #F0F2F5; }
ul { list-style:none; margin:0; padding:0 }
#watch { font-size:1em; position:relative }
#watch .frame-face { position:relative; width:30em; height:30em; margin:2em auto;
}
#watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#watch .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#watch .digits li:nth-child(12) { transform:translate(0, -8em) }
#watch .digits:before { content:''; width:1.6em; height:1.6em; border-radius:.8em; position:absolute; top:50%; left:50%; margin:-.8em 0 0 -.8em; background:#121314;
}
@keyframes hours { to {transform:rotate(335deg)} }
#watch .hours-hand { width:.8em; height:7em; border-radius:.9em .9em .9em .9em; background:#232425; position:absolute; bottom:50%; left:50%; margin:0 0 -.8em -.4em; box-shadow:#232425 0 0 2px; transform-origin:0.4em 6.2em; transform:rotate(-25deg); animation:hours 43200s linear 0s infinite;
}
@keyframes minutes { to {transform:rotate(422deg)} }
#watch .minutes-hand { width:.8em; height:12.5em; border-radius:.5em; background:#343536; position:absolute; bottom:50%; left:50%; margin:0 0 -1.5em -.4em; box-shadow:#343536 0 0 2px; transform-origin:0.4em 11em; transform:rotate(62deg); animation:minutes 3600s linear 0s infinite;
}
@keyframes seconds { to {transform:rotate(480deg)} }
#watch .seconds-hand { width:.2em; height:14em; border-radius:.1em .1em 0 0/10em 10em 0 0; background:#c00; position:absolute; bottom:50%; left:50%; margin:0 0 -2em -.1em; box-shadow:rgba(0,0,0,.8) 0 0 .2em; transform-origin:0.1em 12em; transform:rotate(120deg); animation:seconds 60s steps(60, end) 0s infinite;
}
#watch .digital-wrap { width:9em; height:3em; border:.1em solid #222; border-radius:.2em; position:absolute; top:50%; left:50%; margin:3em 0 0 -4.5em; overflow:hidden; background:#4c4c4c; background:-webkit-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%); background:-moz-linear-gradient(top, #4c4c4c 0%, #0f0f0f 100%); background:-ms-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%); background:-o-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%); background:linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);
}
#watch .digital-wrap ul { float:left; width:2.85em; height:3em; border-right:.1em solid #000; color:#ddd; font-family:Consolas, monaco, monospace;
}
#watch .digital-wrap ul:last-child { border:none }
#watch .digital-wrap li { font-size:1.5em; line-height:2; letter-spacing:2px; text-align:center; position:relative; left:1px;
}
#watch .digit-minutes li { animation:dsm 3600s steps(60, end) 0s infinite;
}
#watch .digit-seconds li { animation:dsm 60s steps(60, end) 0s infinite;
}
@keyframes dsm { to { transform:translateY(-120em) }
}

CSS3 Working Clock - Script Codes JS Codes

/***
This is a pure-CSS3 clock. It uses CSS animations and shapes, without any images or JavaScript.
***/

Home Page	Home
Developer	Julien Lepoivre
Username	BigPepper
Uploaded	October 02, 2022
Rating	3
Size	4,462 Kb
Views	14,168

Do you need developer help for CSS3 Working 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!

Julien Lepoivre (BigPepper) Script Codes

Name	Size
CheckBox Hack CSS	1,492 Kb
Red.	5,042 Kb
Made For Codepen	1,475 Kb
POST-IT website	2,737 Kb
RESPONSIVE SCREENS	2,675 Kb
Bach.js	2,408 Kb
Realtime Delaunay Triangulation	5,846 Kb
Reactive Background	1,765 Kb
Biru framework ready	18,739 Kb
BIGPEPPER THEME WIP	7,229 Kb

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!

Similar Scripts & Codes

Name	Username	Size
TigerWoods Freecodecamp Page	Baileytj	2,869 Kb
CSS Flip Animation	Bbodine1	2,525 Kb
RWD Conversion Practice	Jxqr97	2,743 Kb
SlideupBoxes	Gavra	23,772 Kb
IE11 Test	Boostnewmedia	4,998 Kb
Bootstrap example	Ssaakkaa	2,716 Kb
Cool audio	Bigliam	1,868 Kb
A Pen by Alex Bergin	Abergin	3,347 Kb
Tumblr API	Juanv911	2,436 Kb
Vanilla JS - A toggleClass function	Woodwork	2,532 Kb

Do you want hide your ip address?

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!