Pure css Number Counter | CSS Animation | No Javascript

byCodingFlicks -November 06, 2020

0

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Pure css Number Counter | No Javascript</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="box-area">
		<span class="box num3"></span>
		<span class="box num2"></span> 
		<span class="box num1"></span>
	</div>
</body>
</html>

CSS

body {
	background: deepskyblue;
}
.box-area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.box-area span {
	color: #fff;
	border: 10px solid #fff;
	padding: 0 60px;
	border-radius: 25px;
	margin: 0 10px;
	border-radius: 50%;
}
.box {
	display: inline-block;
	overflow: hidden;
	height: 1em;
	line-height: 1em;
	font-weight: bold;
	font-size: 11em;
}
.box::after {
	position: relative;
	white-space: pre;
	content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
}
.box.num1::after {
	animation: animate 1s steps(10) infinite;
}
.box.num2::after {
	animation: animate 10s steps(10) infinite;
}
.box.num3::after {
	animation: animate 100s steps(10) infinite;
}
@keyframes animate {
	0% {
		top: 0;
	}
	100% {
		top: -10em;
	}
}

Please do not enter any spam link in the comment box.