Steps to follow : –
- Create html file or copy clock.html file below.
- Create css file or copy clock.css file below.
- Link them
<link rel=”stylesheet” type=”text/css” href=”clock.css”>
clock.html file
<html>
<head>
<title>CLOCK</title>
<link rel=”stylesheet” type=”text/css” href=”clock.css”>
</head>
<body><center><div class=”div”>CLOCK</div></center>
<div class=”div2″></div>
<div class=”div3″></div>
<div class=”div4″></div>
<div class=”div5″></div>
<div class=”div6″></div>
<div class=”div7″></div>
<div class=”div8″></div>
<div class=”div9″></div>
<div class=”div10″></div>
<div class=”div11″></div>
<div class=”div12″></div>
<div class=”div13″></div>
</body>
</html>
clock.css file
.div{border:4px solid #006666;text-align:center;font-size:40px;color:#00ff00;background:cadetblue;animation-name:ex;animation-duration:8s;animation-iteration-count:infinite;position:relative;border-radius:200px;margin-top:2%;margin-left:40%;margin-right:30%;padding-left:50px;padding-right:60px;padding-top:160px;padding-bottom:160px;box-shadow:2px 2px 8px 10px #006666;}
@keyframes ex{
0%{color:#fff;}
50%{color:#006666;}
75%{color:#00ff00;background:#006666;}
100%{color:#00ffff;}
}
body {
counter-reset: my-sec-counter;
background:#cccccc;
}
.div2::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div3::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div4::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div5::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div6::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div7::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div8::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div9::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div10::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div11::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div12::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div13::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div2{margin-top:-360px;margin-left:740px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div3{margin-top:15px;margin-left:800px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div4{margin-top:69px;margin-left:840px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div5{margin-top:70px;margin-left:808px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div6{margin-top:19px;margin-left:749px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div7{margin-top:-14px;margin-left:665px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div8{margin-top:-53px;margin-left:590px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div9{margin-top:-88px;margin-left:530px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div10{margin-top:-138px;margin-left:500px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div11{margin-top:-135px;margin-left:531px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div12{margin-top:-80px;margin-left:590px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div13{margin-top:-50px;margin-left:655px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
@keyframes example{
0%{color:white;}
50%{color:#006600;font-size:30px;}
75%{color:#00ff00;font-size:30px;}
100%{color:00ffff;font-size:30px;}
}
View of the Clock Image and also you can try above code( html + css )in your text-editor
To follow my blog to click below
© WebCoder.com
Please follow me on social media pages : –
WebCoder 
One thought on “CLOCK GLOW CONTINUOUSLY”