BASIC CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pro 3D Kinetic Ring Animation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle, #111, #000);
overflow: hidden;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
perspective: 1000px;
}
/* Container ko rotate karne ke liye extra animation */
.scene {
position: relative;
transform-style: preserve-3d;
animation: rotateScene 20s linear infinite;
}
@keyframes rotateScene {
0% { transform: rotateY(0deg) rotateX(0deg); }
100% { transform: rotateY(360deg) rotateX(360deg); }
}
.circle {
position: absolute;
width: 250px;
height: 250px;
border: 2px solid #fff;
border-radius: 50%;
/* Glassmorphism effect */
background: transparent;
pointer-events: none;
}
</style>
</head>
<body>
<div class="container">
<div class="scene" id="scene">
</div>
</div>
<script>
const scene = document.getElementById('scene');
const totalRings = 100; // 20 se badha kar 100 kar diya
for (let i = 0; i < totalRings; i++) {
let ring = document.createElement('div');
ring.className = 'circle';
// JavaScript se properties set karna
let delay = i * 0.05;
let hue = i * (360 / totalRings); // Perfect color gradient
ring.style.borderColor = `hsla(${hue}, 100%, 60%, 0.8)`;
ring.style.boxShadow = `0 0 15px hsla(${hue}, 100%, 60%, 0.5), inset 0 0 15px hsla(${hue}, 100%, 60%, 0.5)`;
// Modern Web Animation API ka use (CSS keyframes se fast aur flexible)
ring.animate([
{ transform: `rotateX(70deg) translateZ(-400px) scale(0.5)`, opacity: 0 },
{ transform: `rotateX(70deg) translateZ(0px) scale(1.2)`, opacity: 1, offset: 0.5 },
{ transform: `rotateX(70deg) translateZ(400px) scale(0.5)`, opacity: 0 }
], {
duration: 4000,
iterations: Infinity,
delay: i * 50,
easing: 'ease-in-out'
});
scene.appendChild(ring);
}
// Mouse move par perspective change karna (Interactive element)
document.addEventListener('mousemove', (e) => {
let x = (window.innerWidth / 2 - e.pageX) / 20;
let y = (window.innerHeight / 2 - e.pageY) / 20;
scene.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
});
</script>
</body>
</html>