Published - | Updated - May 26, 2021 12:13 am
156 Views
Hello Dev,
Today, i we will show you how to create animated background using CSS. This article will give you simple example of how to create animated background using CSS. you will learn how to create animated background using CSS. So let’s follow few step to create example of how to create animated background using CSS.
Example
<!DOCTYPE html>
<html>
<head>
<title>How To Create Animated Background using CSS</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(155deg, #4caf50, #e91e63, #ff9800, #00bcd4);
background-size: 450%;
animation: bganimation 15s infinite;
}
.container {
height: 100vh;
width: 1170px;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h3 {
color: #fff;
font-size: 44px;
}
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="container">
<h3>How To Create Animated Background using CSS</h3>
</div>
</body>
</html>