All Source Code : https://www.patreon.com/onlinetutorials Get now more than 1000+ source code just by clicking on this link …
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS + Javascript BG Animation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container"></div>
<script>
let container = document.querySelector('.container');
for(let i = 1; i <= 2500; i++){
let box = document.createElement('div');
box.classList.add('box');
container.appendChild(box);
}
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container
{
width: 100%;
height: 100vh;
background: #111;
overflow: hidden;
}
.box
{
position: relative;
width: 24px;
height: 24px;
background: #111;
float: left;
border: 1.5px solid rgba(0,0,0,0.5);
box-sizing: border-box;
overflow: hidden;
}
.box::before
{
content: '';
position: absolute;
inset: 0;
background: #1d1d1d;
transition: 2s ease-in-out;
}
.box:hover::before
{
transition: 0s ease-in-out;
background: #fff;
}
.box:nth-child(9n+1):hover::before
{
background: #f00;
}
.box:nth-child(9n+2):hover::before
{
background: #0f0;
}
.box:nth-child(9n+3):hover::before
{
background: #00f;
}
.box:nth-child(9n+4):hover::before
{
background: #ff0;
}
.box:nth-child(9n+5):hover::before
{
background: #0ff;
}
.box:nth-child(9n+6):hover::before
{
background: #f0f;
}
.box:nth-child(9n+7):hover::before
{
background: #e91e63;
}
.box:nth-child(9n+8):hover::before
{
background: #00ffad;
}
.box:nth-child(9n+9):hover::before
{
background: #f45103;
}
.box::after
{
content: '';
position: absolute;
inset: 2px;
background: #1d1d1d;
transition: 2s ease-in-out;
}
