CSS Clock

Developer
APinix
Size
1,807 Kb
Views
6,072
  1. CSS Clock Previews
  2. CSS Clock HTML Codes
  3. CSS Clock CSS Codes

How do I make an css clock?

An animated clock with pure CSS. What is a css clock? How do you make a css clock? This script and codes were developed by APinix on 11 January 2023, Wednesday.

CSS Clock Previews
IQ Test

CSS Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper center"> <div class="timer"></div>
</div>
</body>
</html>

CSS Clock - Script Codes CSS Codes

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #323a44;
}
.wrapper { width: 200px; height: 200px;
}
.center {	margin: auto;	position: absolute;	top: 0;	left: 0;	bottom: 0;	right: 0;
}
/* Timer */
.timer { width: 100%; height: 100%; background-color: transparent; border: 8px solid #fff; border-radius: 50%; position: relative; }
.timer:after, .timer:before { position: absolute; content: ""; background-color: #fff;
}
.timer:after { width: 40%; height: 8px; border-radius: 5px; top: 50%; left: 50%; -webkit-transform-origin: 4px 4px; -moz-transform-origin: 4px 4px; transform-origin: 4px 4px; -webkit-animation: minhand 2s linear infinite; -moz-animation: minhand 2s linear infinite; animation: minhand 2s linear infinite;
}
.timer:before { width: 20%; height: 8px; border-radius: 5px; top: 50%; left: 50%; -webkit-transform-origin: 4px 4px; -moz-transform-origin: 4px 4px; transform-origin: 4px 4px; -webkit-animation: hrhand 8s linear infinite; -moz-animation: hrhand 8s linear infinite; animation: hrhand 8s linear infinite;
}
@-webkit-keyframes minhand { 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand { 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}
}
@-webkit-keyframes hrhand { 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand { 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}
}
CSS Clock - Script Codes
CSS Clock - Script Codes
Home Page Home
Developer APinix
Username aPinix
Uploaded January 11, 2023
Rating 3
Size 1,807 Kb
Views 6,072
Do you need developer help for CSS 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!

APinix (aPinix) Script Codes
Name
Fire on Resize Finish
IOS7 Flat Toggle
A Pen by aPinix
AppStore Flat Hollow Badge
Wheel Menu
Pure CSS Tooltip
Guided Tour Tooltip
Blur Hover Effect
SASS Clock
CSS Infinite 360
Create amazing love letters 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!