All Source Code : https://www.patreon.com/onlinetutorials Get now more than 1000+ source code just by clicking on this link …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Effects</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
let container = document.querySelector('.container');
for (let j = 0; j < 4; j++){
let loader = document.createElement('div');
loader.classList.add('loader');
loader.style.setProperty('--j', j);
for (let i = 1; i <= 20; i++){
let span = document.createElement('span');
span.style.setProperty('--i',i);
loader.appendChild(span);
}
container.appendChild(loader);
}
})
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #042104;
filter: hue-rotate(70deg);
}
.loader
{
position: relative;
transform: rotate(calc(45deg * var(--j)));
}
.loader span
{
position: absolute;
transform: rotate(calc(18deg * var(--i)));
}
.loader span::before
{
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 2px solid #00ff0a;
border-radius: 2px;
animation: animate 5s linear infinite;
animation-delay: calc(-0.5s * var(--i));
}
.loader:nth-child(even) span::before
{
background: #00ff0a;
}
@keyframes animate
{
0%
{
transform: translateX(250px) scale(4);
opacity: 0;
}
50%
{
opacity: 1;
}
100%
{
transform: translateX(-10px) scale(0);
}
}
