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.
HTML
<!DOCTYPE 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%;
}
Note: If you are beginner please practice those code to
get Good results.also comment on our blog.
Thank you so much 💛
Related Posts
Subscribe Our Newsletter
0 Comments to "make awesome colour animation with html and css"
Post a Comment
Thank you so much!