HTML File: (index.html)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Old Fashioned Film Countdown Timer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="niddle"></div>
<div class="number">
<div>10</div>
<div>9</div>
<div>8</div>
<div>7</div>
<div>6</div>
<div>5</div>
<div>4</div>
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</div>
</body>
</html>
CSS File: (style.css)
body
{
margin: 0;
padding: 0;
height: 100vh;
font-style: sans-serif;
}
.box
{
position: absolute;
width:100%;
height:100%;
background: radial-gradient(#fff,#757575);
overflow: hidden;
}
.box:before
{
content: '';
position: absolute;
top:50%;
left: 0%;
transform: translateY(-50%);
width:100%;
height: 5px;
background: #000
}
.box:after
{
content: '';
position: absolute;
top:0;
left: 50%;
transform: translateX(-50%);
width:5px;
height: 100%;
background: #000
}
.circle
{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:500px;
height:500px;
border:5px solid #fff;
border-radius: 50%;
z-index: 1;
}
.circle.circle2
{
width:600px;
height:600px;
}
.niddle
{
position: absolute;
top:calc(50% - 2px);
left: 50%;
height: 4px;
width:1200px;
background: #000;
animation: animate 1s linear infinite;
transform-origin: left;
}
@keyframes animate {
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.number
{
position: absolute;
width:100%;
height: 100%;
}
.number div
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 25em;
font-weight: bold;
display: flex;
justify-content:center;
align-items: center;
opacity:0;
animation: animateNumber 10s linear infinite;
}
.number div:nth-child(1)
{
animation-delay: 0s;
}
.number div:nth-child(2)
{
animation-delay: 1s;
}
.number div:nth-child(3)
{
animation-delay: 2s;
}
.number div:nth-child(4)
{
animation-delay: 3s;
}
.number div:nth-child(5)
{
animation-delay: 4s;
}
.number div:nth-child(6)
{
animation-delay: 5s;
}
.number div:nth-child(7)
{
animation-delay: 6s;
}
.number div:nth-child(8)
{
animation-delay: 7s;
}
.number div:nth-child(9)
{
animation-delay: 8s;
}
.number div:nth-child(10)
{
animation-delay: 9s;
}
@keyframes animateNumber {
0%,10%
{
opacity: 1;
}
10.01%,100%
{
opacity: 0;
}
}
Leave a Reply