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>
<head>
<meta charset="utf-8">
<title>Cubes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="container"></div>
<script>
function createStructure() {
const container = document.getElementById('container');
const zValues = [ -3, -2, -1, 0, 1, 2, 3];
zValues.forEach(z => {
const cube = document.createElement('div');
cube.classList.add('cube');
cube.style.setProperty('--z', z);
for (let x = -3; x <= 3; x++) {
const div = document.createElement('div');
div.style.setProperty('--x', x);
div.style.setProperty('--y', 0);
const span = document.createElement('span');
span.style.setProperty('--i', 3);
div.appendChild(span);
cube.appendChild(div);
}
container.appendChild(cube);
});
// Randomly activate spans and remove after 2 seconds
activateRandomSpan();
}
function activateRandomSpan() {
const spans = document.querySelectorAll('.cube span');
setInterval(() => {
const randomIndex = Math.floor(Math.random() * spans.length);
const randomSpan = spans[randomIndex];
randomSpan.classList.add('active');
setTimeout(() => {
randomSpan.classList.remove('active');
}, 2000);
}, 500); // Repeat every second
}
createStructure();
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #555;
}
.container
{
position: relative;
transform: skewY(-20deg);
}
.container .cube
{
position: relative;
z-index: 2;
translate: calc(var(--z) * 60px) calc(var(--z) * 60px);
}
.container .cube div
{
position: absolute;
translate: calc(-80px * var(--x)) calc(-70px * var(--y));
}
.container .cube div span
{
position: relative;
display: inline-block;
width: 50px;
height: 50px;
background: #dcdcdc;
transition: 1.5s;
}
.container .cube div span.active
{
transition: 0.5s;
background: #ef4149;
transform: translate(0px,-50px);
animation: animate 2s ease-in-out infinite;
}
.container .cube div span::before
{
content: '';
position: absolute;
left: -40px;
width: 40px;
height: 100%;
background: #c8c8c8;
transform-origin: right;
transform: skewY(45deg);
transition: 1.5s;
}
.container .cube div span.active::before
{
transition: 0.5s;
background: #f75d64;
}
.container .cube div span::after
{
content: '';
position: absolute;
top: -40px;
left: 0;
width: 100%;
height: 40px;
background: #f2f2f2;
transform-origin: bottom;
transform: skewX(45deg);
transition: 1.5s;
box-shadow: -100px 100px 5px rgba(0,0,0,0.15);
}
.container .cube div span.active::after
{
transition: 0.5s;
background: #f14e55;
box-shadow: -150px 150px 5px rgba(0,0,0,0.15);
}
@keyframes animate
{
0%
{
filter: hue-rotate(0deg);
}
100%
{
filter: hue-rotate(360deg);
}
}
