Animated Indian Flag using Html and CSS
Hey guys, hope you enjoyed this video and knew something about that how to make Animated Indian Flag . If you like this video and gained some knowledge then make sure to hit the like and subscribe button and also share this video to your friends and family so that they can also get some knowledge about this.
I you want to see this video "Animated Indian Flag Using html and css" then click 'here'
Source Code
Html code as described in the video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indian Flag</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flag-box">
<img src="img/wave-top.png" alt="No image available" class="wave-top">
<img src="img/wave-bottom.png" alt="No image available" class="wave-bottom">
</div>
</body>
</html>
CSS code as described in this video
*{
margin: 0;
padding: 0;
}
.flag-box{
height: 500px;
width: 700px;
background-image: url(img/flag-full.png);
background-size: cover;
background-position: center;
margin: 5% auto;
position:relative;
}
.wave-top{
top: -50px;
right: 0;
position: absolute;
animation: slide-wave 2s linear infinite;
}
.wave-bottom{
bottom: -50px;
right: 0;
position: absolute;
animation: slide-wave 3s linear infinite;
}
@keyframes slide-wave{
0%{
transform: translateX(0);
}
100%{
transform: translateX(200px);
}
}
Comments
Post a Comment