CSS-only Clock

Developer
Nobitagit
Size
3,198 Kb
Views
6,072
  1. CSS-only Clock Previews
  2. CSS-only Clock HTML Codes
  3. CSS-only Clock CSS Codes
  4. CSS-only Clock JS Codes

How do I make an css-only clock?

A working clock made only with CSS3. Experimenting with the steps() value of CSS3 animations. Leveraging this value allows to achieve the clockwork motion by declaring only one keyframe shared for all the arms of the clock.. What is a css-only clock? How do you make a css-only clock? This script and codes were developed by Nobitagit on 05 December 2022, Monday.

CSS-only Clock Previews
IQ Test

CSS-only Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS-only Clock</title> <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{ background: #444 url('https://goo.gl/yfKGK') repeat; }
.clock{ width: 200px; height: 200px; border-radius: 200px; border: 15px solid #222; box-shadow: 9px 13px 20px rgba(0,0,0,.8), 0 0 4px #222, 0 -3px 122px #555 inset;
background-image: -webkit-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
background-image: -moz-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
background-image: -ms-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
background-image: -o-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
background-image: radial-gradient(farthest-side circle at center center, #ffffff 0%, #5c5c5c 100%); position: relative; margin: 40px auto; }
.clock:after{ content: ""; width: 12px; height: 12px; border-radius: 10px; background: #555; display: block; position: absolute; left: 92px; top: 97px; }
.clock:before{ content: ""; width: 180px; height: 180px; top: 6px; left: 6px; position: absolute; border-radius: 180px; border: 4px dotted #444; }
.clock div{ position: absolute; margin-left: 96px; }
.sec{ height: 100px; width: 4px; top: 52px; background: none; box-shadow: 0 -40px 0 1px #444, 0 1px 0 1px #444; -webkit-animation: 60s steps(60) tick infinite; -moz-animation: 60s steps(60) tick infinite; }
.mns, .hrs{ height: 35px; width: 5px; top: 85px; background: #962033; }
.mns{ box-shadow: 0 -30px #962033, 0 -60px #962033, 1px 0 7px #777, 1px -28px 7px #777, 1px -58px 7px #777; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-animation: 3600s steps(60) tick infinite; -moz-animation: 3600s steps(60) tick infinite; }
.hrs{ box-shadow: 0 -20px #962033, 0 -40px #962033, 1px 0 3px #777, 1px -19px 3px #777, 1px -38px 3px #777; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-animation: 43200s linear tick infinite; -moz-animation: 43200s linear tick infinite; }
@-webkit-keyframes tick{ to{ -webkit-transform: rotate(360deg); }
}
#-moz-keyframes tick{ to{ -moz-transform: rotate(360deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="clock"> <div class="sec"></div> <div class="mns"></div> <div class="hrs"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS-only Clock - Script Codes CSS Codes

body{ background: #444 url('https://goo.gl/yfKGK') repeat; }
.clock{ width: 200px; height: 200px; border-radius: 200px; border: 15px solid #222; box-shadow: 9px 13px 20px rgba(0,0,0,.8), 0 0 4px #222, 0 -3px 122px #555 inset;
background-image: -webkit-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
background-image: -moz-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
background-image: -ms-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
background-image: -o-radial-gradient(center center, farthest-side circle, #ffffff 0%, #5c5c5c 100%);
background-image: radial-gradient(farthest-side circle at center center, #ffffff 0%, #5c5c5c 100%); position: relative; margin: 40px auto; }
.clock:after{ content: ""; width: 12px; height: 12px; border-radius: 10px; background: #555; display: block; position: absolute; left: 92px; top: 97px; }
.clock:before{ content: ""; width: 180px; height: 180px; top: 6px; left: 6px; position: absolute; border-radius: 180px; border: 4px dotted #444; }
.clock div{ position: absolute; margin-left: 96px; }
.sec{ height: 100px; width: 4px; top: 52px; background: none; box-shadow: 0 -40px 0 1px #444, 0 1px 0 1px #444; -webkit-animation: 60s steps(60) tick infinite; -moz-animation: 60s steps(60) tick infinite; }
.mns, .hrs{ height: 35px; width: 5px; top: 85px; background: #962033; }
.mns{ box-shadow: 0 -30px #962033, 0 -60px #962033, 1px 0 7px #777, 1px -28px 7px #777, 1px -58px 7px #777; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-animation: 3600s steps(60) tick infinite; -moz-animation: 3600s steps(60) tick infinite; }
.hrs{ box-shadow: 0 -20px #962033, 0 -40px #962033, 1px 0 3px #777, 1px -19px 3px #777, 1px -38px 3px #777; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-animation: 43200s linear tick infinite; -moz-animation: 43200s linear tick infinite; }
@-webkit-keyframes tick{ to{ -webkit-transform: rotate(360deg); }
}
#-moz-keyframes tick{ to{ -moz-transform: rotate(360deg); }
}

CSS-only Clock - Script Codes JS Codes

/*
A working clock made only with CSS3.
Experimenting with the steps() value of CSS3 animations.
One keyframe shared for three elements (the arms) each with a different behaviour.
*/
CSS-only Clock - Script Codes
CSS-only Clock - Script Codes
Home Page Home
Developer Nobitagit
Username nobitagit
Uploaded December 05, 2022
Rating 3
Size 3,198 Kb
Views 6,072
Do you need developer help for CSS-only 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!

Nobitagit (nobitagit) Script Codes
Name
Prankmarklet
CSS3 Locker
Radials
Rebbbound
Ripples in water
Svg mobile burger icon
A Pen by nobitagit
Angularjs Material floating button directive
CSS Turntable
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!