Nested DIV Circles (Animated)
Nested circles, animated with CSS to make a tunneling effect.
by MegaScience
HTML
<div id="container" class="loading"><!--
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
...CSS
@keyframes myOrbit1 {
from {
transform: rotate(0deg) translateX(10px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(10px) rotate(-360deg);
}
}
@keyframes myOrbit2 {
from {
transform: rotate(360deg) translateX(10px) rotate(-360deg);
}
to {
transform: rotate(0deg) translateX(10px) rotate(0deg);
}
}
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
#container {
overflow: hidden;
}
#container div {
height: 100%;
width: 100%;
padding: 5%;
border-radius: 100%;
border: 2px solid rgba(0, 0, 0, 0.3);
box-sizing: border-box;
background-color: rgba(0, 0, 255, 0.3);
}
#container div.even {
background-color: rgba(0, 0, 255, 0.3);
}
#container:not(.loading) div.even {
animation: myOrbit2 4s linear infinite;
}
#container div.odd {
background-color: rgba(0, 255, 0, 0.3);
}
#container:not(.loading) div.odd {
animation: myOrbit1 3s linear infinite;
}
#container div:empty {
background-color: rgba(255, 0, 0, 0.3);
}
#container > div {
height: 100vmin;
width: 100vmin;
overflow: hidden;
margin: 0 auto;
}
#container {
width: 100%;
height: 100%;
}JavaScript
/*var ,
circles = document.querySelectorAll("div:not(#container)"),
cLength = circles.length,
eLength = evdd.length
j = 0;
for(var i = 0; i < cLength; i++)
circles[i].classList.add(evdd[++j % 2]);
//circles[i].classList.add(++j % 2 === 0 ? evdd[0] : evdd[1]);*/
/*
var circleCount = 0,
classEO = ["even", "odd"],
circleContainer = document.getElementById("container");
function addCircle() {
if(circleCount > 25) {
document.getElementById("container").classList.remove("loading");
clearInterval(circleAdder);
return;
}
var newCircle = document.createElement("div");
newCircle.classList.add(classEO[++circleCount % 2]);
circleContainer.appendChild(newCircle);
circleContainer = newCircle;
}
var circleAdder = setInterval(addCircle, 500);
*/
function init() {
let c = 0,
cC = document.getElementById('container'),
cl = ['even', 'odd']
function addCircle() {
const nC = document.createElement('div')
nC.classList.add(cl[++c % 2])
cC.appendChild(nC)
cC = nC
if(c > 24) document.getElementById('container').classList.remove('loading')
else setTimeout(addCircle, 250)
}
addCircle()
}
init()