Republic Day Animation By Using HTML Code || Republic Day HTML Code
Hello Viewers
Today we will learn how to create or design Animated Republic Day Text by using HTML, CSS.
If you want to learn step by step in Hindi, So you can move to my YouTube's Channel (IT in Hindi).
In this post we are providing the full source code of Analog Clock.
You can copy and use the code because it is non copyright.
SOURCE CODE:
HTML CODE:
Step1- Copy and paste the HTML code mentioned below and save the file as "Republicday.html".
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: 'popping', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 70px;
background: #252839;
}
#d1{
margin-left: -30px;
margin-top: 100px;
width: 50%;
height: 400px;
border:5px solid red;
padding: 50px;
border-radius: 20px;
}
h2{
margin-left: 10px;
position: relative;
font-size: 80px;
color: #252839;
-webkit-text-stroke:0.3vw #383d52;
text-transform: uppercase;
}
h2::before{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 80%;
color: orange;
-webkit-text-stroke:0.3vw orange;
border-right: 2px solid #252839;
overflow: hidden;
animation: animate 6s linear infinite;
}
@keyframes animate
{
0%,10%,100%
{
width: 0;
}
70%,90%
{
width: 100%;
}
}
h3{
margin-left: 10px;
position: relative;
font-size: 80px;
color: #252839;
-webkit-text-stroke:0.3vw #383d52;
text-transform: uppercase;
}
h3::before{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 80%;
color: #fff;
-webkit-text-stroke:0.3vw #fff;
border-right: 2px solid #252839;
overflow: hidden;
animation: animate 6s linear infinite;
}
@keyframes animate
{
0%,10%,100%
{
width: 0;
}
50%,90%
{
width: 100%;
}
}
h1{
margin-left: 10px;
position: relative;
font-size: 80px;
color: #252839;
-webkit-text-stroke:0.3vw #383d52;
text-transform: uppercase;
}
h1::before{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 80%;
color: green;
-webkit-text-stroke:0.3vw green;
border-right: 2px solid #252839;
overflow: hidden;
animation: animate 6s linear infinite;
}
@keyframes animate
{
0%,10%,100%
{
width: 0;
}
70%,90%
{
width: 100%;
}
}
h4{
color: white;
padding-left: 12px;
text-shadow: 2px 2px 8px #FF0000;
}
#mychannel{
color: white;
padding-left: 12px;
padding-top: 5px;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<div id="d1">
<h4>*** WISH YOU ***</h4>
<h2 data-text="happy">happy</h2>
<h3 data-text="independence">independence</h3>
<h1 data-text="day">day</h1>
<h4 id="mychannel">*** IT IN HINDI ***</h4>
</div>
</body>
</html>
------------------------------END---------------------
How to run the source code :-
Step1- Copy and paste the HTML code mentioned below and save the file as "Republicday.html".
Step2- Run "Republicday.html" file.
0 Comments