css 3D wave CIRCLE LOADER ANIMATION EFFEECTS
css 3D wave CIRCLE LOADER ANIMATION EFFEECTS
CODE▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WAVE</title>
<STYLE>
*{
margin:0 ;
padding:0;
}
body{
display:flex ;
justify-content: center;
align-items: center;
min-height:100vh ;
background:#9c27b0 ;
}
.loader{
position: relative;
width:300px ;
height: 300px;
transform-style:preserve-3d;
transform:perspective(500px) rotatex(60deg);
}
.loader span
{
position: absolute;
display: block;
border: 5px solid #fff;
box-shadow: 0 5px 0 #ccc;
inset :0 5px 0#ccc;
box-sizing: border-box;
border-radius: 50%;
animation: animate 3s ease-in-out infinite;
}
@keyframes animate{
0%,100%{ transform: translateZ(-100px);}
50%{ transform: translateZ(100px);}
}
.loader span:nth-child(1)
{ top:0px;
Left:0px;
bottom:0px;
right:0px;
animation-delay: 1.5s;
}
.loader span:nth-child(2)
{ top:10px;
Left:10px;
bottom:10px;
right:10px;
animation-delay: 1.4s;
}
.loader span:nth-child(3)
{ top:20px;
Left:20px;
bottom:20px;
right:20px ;
animation-delay: 1.3s;
}
.loader span:nth-child(4)
{ top:30px;
Left:30px;
bottom:30px;
right:30px;
animation-delay: 1.2s;
}
.loader span:nth-child(5)
{ top:40px;
Left:40px;
bottom:40px;
right:40px;
animation-delay: 1.1s;
}
.loader span:nth-child(6)
{ top:50px;
Left:50px;
bottom:50px;
right:50px;
animation-delay: 1s;
}
.loader span:nth-child(7)
{ top:60px;
Left:60px;
bottom:60px;
right:60px;
animation-delay: 0.9s;
}
.loader span:nth-child(8)
{ top:70px;
Left:70px;
bottom:70px;
right:70px;
animation-delay: 0.8s;
}
.loader span:nth-child(9)
{ top:80px;
Left:80px;
bottom:80px;
right:80px;
animation-delay: 0.7s;
}
.loader span:nth-child(10)
{ top:90px;
Left:90px;
bottom:90px;
right:90px;
animation-delay: 0.6s;
}
.loader span:nth-child(11)
{ top:100px;
Left:100px;
bottom:100px;
right:100px;
animation-delay: 0.5s;
}
.loader span:nth-child(12)
{ top:110px;
Left:110px;
bottom:110px;
right:110px;
animation-delay: 0.4s;
}
.loader span:nth-child(13)
{ top:120px;
Left:120px;
bottom:120px;
right:120px;
animation-delay:0.3s;
}
.loader span:nth-child(14)
{ top:130px;
Left:130px;
bottom:130px;
right:130px;
animation-delay: 0.2s;}
.loader span:nth-child(15)
{ top:140px;
Left:140px;
bottom:140px;
right:140px;
animation-delay: 0.1s;
}
.loader span:nth-child(16)
{ top:200px;
Left:200px;
bottom:200px;
right:200px;
animation-delay: 0s;
}
</STYLE>
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
COPY THE CODE AND PASTE IT IN THE CODE EDITOR(SUCH AS NOTEPAD) AND THEN SAVE IT .. THEN RUN
Here is the video⏬⏬⏬⏬⏬⏬⏬⏬
Post a Comment