make awesome colour animation with html and css

CSS Practice

If you are beginner of html and css.you can practice this code to strong your skill.you don't have laptop or desktop computer , No problem You also practice those code on your smartphone.

You May Like

HTML

<!DOCTYPE html>

<html>

<head>

<title>Html css practice</title>

</head>

<body>

</div>

</body>

</html>

CSS

body{
margin: 0;

padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #240229;
}
.loader{
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
animation: animate 0.5s linear infinite;
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.loader span{
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
animation: animate 0.5s linear infinite;
}
.loader span:nth-child(1)
{
filter: blur(5px);
}

.loader span:nth-child(2)
{
filter: blur(10px);
}

.loader span:nth-child(3)
{
filter: blur(25px);
}

.loader span:nth-child(4)
{
filter: blur(50px);
}

.loader:after
{
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #240229;
border-radius: 50%;
}