Welcoem to posts!!
in the future - u will be able to do some more stuff here,,,!! like pat catgirl- i mean um yeah... for now u can only see others's posts :c
source code of - Ultra-Stylish 3D Sci-Fi Navbar -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultra-Stylish 3D Sci-Fi Navbar</title>
<style>
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #0a0a0a;
color: #fff;
overflow-x: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Navbar Container */
.navbar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: rgba(10, 10, 10, 0.9);
padding: 20px 40px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 255, 204, 0.3), 0 0 40px rgba(255, 0, 204, 0.3);
transform-style: preserve-3d;
perspective: 1000px;
}
/* Menu Items */
.menu {
display: flex;
gap: 40px;
list-style: none;
}
.menu li {
position: relative;
}
.menu a {
text-decoration: none;
color: #00ffcc;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
padding: 10px 20px;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}
/* Glow Hover Effect */
.menu a::before {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 3px;
background: #ff00cc;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.menu a:hover::before {
width: 100%;
}
.menu a:hover {
color: #ff00cc;
text-shadow: 0 0 10px #ff00cc, 0 0 20px #ff00cc;
}
/* Active Link */
.menu a.active {
color: #ff00cc;
text-shadow: 0 0 10px #ff00cc, 0 0 20px #ff00cc;
}
/* 3D Floating Effect */
.navbar::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
width: 80%;
height: 20px;
background: linear-gradient(90deg, #00ffcc, #ff00cc);
opacity: 0.5;
filter: blur(20px);
transform: translateX(-50%);
animation: float 3s infinite ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translate(-50%, 0);
}
50% {
transform: translate(-50%, -10px);
}
}
/* Glow Trail Effect */
.glow-trail {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(255, 0, 204, 0.5), transparent);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<ul class="menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="glow-trail"></div>
</nav>
<script>
// Add active class on click
const links = document.querySelectorAll('.menu a');
links.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
links.forEach(l => l.classList.remove('active'));
link.classList.add('active');
});
});
// Glow Trail Effect
const navbar = document.querySelector('.navbar');
const glowTrail = document.querySelector('.glow-trail');
navbar.addEventListener('mousemove', (e) => {
const rect = navbar.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
glowTrail.style.opacity = '1';
glowTrail.style.left = `${x}px`;
glowTrail.style.top = `${y}px`;
});
navbar.addEventListener('mouseleave', () => {
glowTrail.style.opacity = '0';
});
</script>
</body>
</html>
0 - 0
source code of - Growth and Connection Animation-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Growth and Connection Animation</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="circleCanvas"></canvas>
<script>
const canvas = document.getElementById('circleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const seedRadius = 50; // Central circle (seed)
const branches = []; // Stores branching circles
let growthPhase = 0; // Tracks growth progress
const growthSpeed = 0.02; // Speed of growth
let gradientHue = 0; // For dynamic gradient colors
// Easing function for smooth growth
function easeOutQuad(t) {
return t * (2 - t);
}
// Create a gradient with dynamic colors
function createGradient(x, y, radius) {
const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, `hsl(${gradientHue}, 100%, 70%)`);
gradient.addColorStop(1, `hsl(${gradientHue + 60}, 100%, 50%)`);
return gradient;
}
// Draw the central seed circle
function drawSeed(x, y, radius) {
ctx.save();
ctx.translate(x, y);
// Glow effect
ctx.shadowBlur = 20;
ctx.shadowColor = `hsl(${gradientHue}, 100%, 70%)`;
// Draw the circle
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
ctx.fillStyle = createGradient(0, 0, radius);
ctx.fill();
ctx.restore();
}
// Draw branching circles
function drawBranches() {
branches.forEach((branch, index) => {
const scale = 1 - index / branches.length; // Fade effect for branches
ctx.save();
ctx.translate(branch.x, branch.y);
// Glow effect for branches
ctx.shadowBlur = 10 * scale;
ctx.shadowColor = `hsl(${gradientHue}, 100%, 70%)`;
// Draw the branch circle
ctx.beginPath();
ctx.arc(0, 0, branch.radius * scale, 0, Math.PI * 2, false);
ctx.strokeStyle = `hsla(${gradientHue}, 100%, 70%, ${scale})`;
ctx.lineWidth = 2 * scale;
ctx.stroke();
ctx.restore();
});
}
// Grow the seed and create branches
function growSeed() {
if (growthPhase < 1) {
growthPhase += growthSpeed; // Increment growth phase
} else {
growthPhase = 0; // Reset growth phase
branches.length = 0; // Clear branches
}
// Add new branches during growth
if (growthPhase > 0.2 && branches.length < 20) {
const angle = Math.random() * Math.PI * 2; // Random angle for branch
const distance = seedRadius + Math.random() * 100; // Random distance from seed
branches.push({
x: centerX + Math.cos(angle) * distance * easeOutQuad(growthPhase),
y: centerY + Math.sin(angle) * distance * easeOutQuad(growthPhase),
radius: 10 + Math.random() * 20 // Random branch size
});
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update gradient hue for dynamic colors
gradientHue = (gradientHue + 0.5) % 360;
// Grow the seed and branches
growSeed();
// Draw the seed and branches
drawSeed(centerX, centerY, seedRadius * easeOutQuad(growthPhase));
drawBranches();
requestAnimationFrame(animate);
}
// Handle window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
animate();
</script>
</body>
</html>
0 - 0
source code of - 3D Gradient Circle Animation-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Gradient Circle Animation</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="circleCanvas"></canvas>
<script>
const canvas = document.getElementById('circleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const circleRadius = 50;
const trail = []; // Stores the trail of circle lines
let isHovered = false;
let yOffset = 0;
const speed = 2; // Speed of movement
let gradientHue = 0; // For dynamic gradient colors
const glowIntensity = 15; // Glow effect intensity
// Easing function for smooth movement
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
// Create a gradient with dynamic colors
function createGradient() {
const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, circleRadius);
gradient.addColorStop(0, `hsl(${gradientHue}, 100%, 70%)`);
gradient.addColorStop(1, `hsl(${gradientHue + 30}, 100%, 50%)`);
return gradient;
}
// Draw the main circle with glow effect
function drawCircle(x, y, radius) {
ctx.save();
ctx.translate(x, y);
// Glow effect
ctx.shadowBlur = glowIntensity;
ctx.shadowColor = `hsl(${gradientHue}, 100%, 70%)`;
// Draw the circle
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
ctx.fillStyle = createGradient();
ctx.fill();
ctx.restore();
}
// Draw the trail of circle lines
function drawTrail() {
trail.forEach((point, index) => {
const scale = 1 - index / trail.length; // Fade and scale effect
ctx.save();
ctx.translate(point.x, point.y);
// Glow effect for the trail
ctx.shadowBlur = glowIntensity * scale;
ctx.shadowColor = `hsl(${gradientHue}, 100%, 70%)`;
// Draw the trail circle
ctx.beginPath();
ctx.arc(0, 0, circleRadius * scale, 0, Math.PI * 2, false);
ctx.strokeStyle = `hsla(${gradientHue}, 100%, 70%, ${scale})`;
ctx.lineWidth = 2 * scale;
ctx.stroke();
ctx.restore();
});
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update gradient hue for dynamic colors
gradientHue = (gradientHue + 0.5) % 360;
// Smoothly update circle position using easing
const targetYOffset = isHovered ? -centerY + circleRadius : centerY - circleRadius;
yOffset += (targetYOffset - yOffset) * 0.1; // Smooth transition
// Add current position to the trail
trail.push({ x: centerX, y: centerY + yOffset });
if (trail.length > 30) trail.shift(); // Limit trail length
// Draw trail and circle
drawTrail();
drawCircle(centerX, centerY + yOffset, circleRadius);
requestAnimationFrame(animate);
}
// Hover effect
canvas.addEventListener('mouseenter', () => {
isHovered = true;
});
canvas.addEventListener('mouseleave', () => {
isHovered = false;
});
// Handle window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
animate();
</script>
</body>
</html>
0 - 0
source code-3D Hollow Circles Animation-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Hollow Circles Animation</title>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="circleCanvas"></canvas>
<script>
const canvas = document.getElementById('circleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const maxRadius = 50; // 1 inch ≈ 50 pixels (adjust as needed)
const minRadius = 5;
const circleCount = 10; // Number of nested circles
const circles = [];
// Create nested circles
for (let i = 0; i < circleCount; i++) {
const radius = maxRadius - (i * (maxRadius - minRadius) / circleCount);
circles.push({
radius: radius,
angle: 0,
speed: (i + 1) * 0.005, // Speed increases for inner circles
z: i // Depth for 3D effect
});
}
function drawCircle(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.strokeStyle = 'white';
ctx.lineWidth = 2;
ctx.stroke();
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw and update circles
circles.forEach((circle, index) => {
const scale = 1 + (circle.z / circleCount) * 2; // 3D scaling effect
const x = centerX + Math.cos(circle.angle) * 20 * scale; // Horizontal movement
const y = centerY + Math.sin(circle.angle) * 20 * scale; // Vertical movement
drawCircle(x, y, circle.radius * scale);
circle.angle += circle.speed; // Update angle for animation
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
1 - 0
source code -Zoom Out Text on Hover-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom Out Text on Hover</title>
<script src="cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.mi…"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #0d0d0d;
color: white;
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.text-container {
font-size: 50px;
font-weight: bold;
display: flex;
gap: 8px;
cursor: pointer;
position: relative;
}
.letter {
transform-origin: center;
transition: transform 0.4s ease-out;
}
</style>
</head>
<body>
<div class="text-container"></div>
<script>
const text = "Energy Flow";
const container = document.querySelector(".text-container");
// Split text into letters
text.split("").forEach((char, i) => {
let span = document.createElement("span");
span.classList.add("letter");
span.textContent = char === " " ? "\u00A0" : char;
container.appendChild(span);
});
const letters = document.querySelectorAll(".letter");
container.addEventListener("mouseenter", () => {
letters.forEach((letter, index) => {
gsap.to(letter, {
scale: 2,
y: -20,
duration: 0.3,
ease: "power2.out",
delay: index * 0.1,
onComplete: () => {
gsap.to(letter, {
scale: 1,
y: 0,
duration: 0.3,
ease: "power2.inOut"
});
}
});
});
});
</script>
</body>
</html>
1 - 1
source code of-Unique 3D Circle Animation-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unique 3D Circle Animation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
overflow: hidden;
perspective: 1500px;
font-family: 'Arial', sans-serif;
}
.container {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
animation: containerRotation 10s infinite linear;
}
.circle {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, #ff4b1f, #1fddff);
box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.8), inset 0px 0px 15px rgba(0, 0, 0, 0.6);
animation: orbit 3s ease-in-out infinite alternate;
transform-style: preserve-3d;
}
.circle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 2px dashed rgba(255, 255, 255, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.trail {
position: absolute;
width: 150px;
height: 150px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: fadeOutTrail 1s linear forwards;
}
@keyframes orbit {
0% { transform: translateZ(0) translateY(0) scale(1); }
50% { transform: translateZ(50px) translateY(-100px) scale(1.2); }
100% { transform: translateZ(0) translateY(-200px) scale(1); }
}
@keyframes fadeOutTrail {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(2); }
}
@keyframes containerRotation {
0% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="circle" id="circle"></div>
</div>
<script>
const circle = document.getElementById('circle');
const container = document.querySelector('.container');
let interval;
circle.addEventListener('mouseenter', () => {
clearInterval(interval);
interval = setInterval(() => {
const trail = document.createElement('div');
trail.classList.add('trail');
trail.style.top = `${circle.offsetTop}px`;
trail.style.left = `${circle.offsetLeft}px`;
container.appendChild(trail);
setTimeout(() => trail.remove(), 1000);
}, 200);
});
circle.addEventListener('mouseleave', () => {
clearInterval(interval);
});
</script>
</body>
</html>
0 - 0
source code of - 3D Circle with Parallel Hollow Trails -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Circle with Parallel Hollow Trails</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #0d0d0d;
overflow: hidden;
position: relative;
}
.container {
position: relative;
width: 100px;
height: 100px;
}
.circle {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, #ff00ff, #ffcc00);
border-radius: 50%;
box-shadow: 0 0 15px #ffcc00;
transition: transform 1.5s ease-in-out;
}
.trail {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
animation: fadeOut 2s forwards;
}
@keyframes fadeOut {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.5); }
}
</style>
</head>
<body>
<div class="container">
<div class="circle"></div>
</div>
<script>
const circle = document.querySelector('.circle');
let isMovingUp = false;
function createTrail(y) {
const trail = document.createElement('div');
trail.classList.add('trail');
trail.style.top = `${y}px`;
document.body.appendChild(trail);
setTimeout(() => trail.remove(), 2000);
}
circle.addEventListener('mouseenter', () => {
if (!isMovingUp) {
isMovingUp = true;
let pos = 0;
const interval = setInterval(() => {
if (pos <= -250) {
clearInterval(interval);
setTimeout(() => moveDown(), 1000);
} else {
pos -= 10;
circle.style.transform = `translateY(${pos}px)`;
createTrail(circle.getBoundingClientRect().top);
}
}, 100);
}
});
function moveDown() {
let pos = -250;
const interval = setInterval(() => {
if (pos >= 0) {
clearInterval(interval);
isMovingUp = false;
} else {
pos += 10;
circle.style.transform = `translateY(${pos}px)`;
createTrail(circle.getBoundingClientRect().top);
}
}, 100);
}
</script>
</body>
</html>
0 - 0
source code of -3D Floating Rings -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Floating Rings</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: radial-gradient(circle, #111, #000);
overflow: hidden;
}
.scene {
width: 200px;
height: 200px;
perspective: 800px;
}
.ring-container {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.ring {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid rgba(0, 255, 255, 0.7);
box-shadow: 0 0 15px cyan;
animation: rotateRing 5s linear infinite;
}
.ring:nth-child(2) {
border-color: magenta;
box-shadow: 0 0 15px magenta;
animation-duration: 6s;
transform: rotateX(60deg);
}
.ring:nth-child(3) {
border-color: yellow;
box-shadow: 0 0 15px yellow;
animation-duration: 7s;
transform: rotateY(60deg);
}
@keyframes rotateRing {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="scene">
<div class="ring-container">
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
</div>
</div>
</body>
</html>
0 - 0
source code of-3D Rotating Cube in Hollow Cube-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Rotating Cube in Hollow Cube</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: radial-gradient(circle, #1a1a2e, #16213e);
overflow: hidden;
}
.scene {
width: 200px;
height: 200px;
perspective: 600px;
}
.hollow-cube {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: rotateHollow 6s linear infinite;
}
.inner-cube {
position: absolute;
width: 100px;
height: 100px;
transform-style: preserve-3d;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateX(45deg) rotateY(45deg);
animation: rotateInner 3s linear infinite;
}
.face {
position: absolute;
width: 100px;
height: 100px;
background: rgba(0, 255, 255, 0.2);
border: 2px solid cyan;
box-shadow: 0 0 10px cyan;
}
.hollow-cube .face {
width: 200px;
height: 200px;
border: 2px solid magenta;
box-shadow: 0 0 15px magenta;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes rotateHollow {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes rotateInner {
from { transform: translate(-50%, -50%) rotateX(45deg) rotateY(45deg); }
to { transform: translate(-50%, -50%) rotateX(405deg) rotateY(405deg); }
}
</style>
</head>
<body>
<div class="scene">
<div class="hollow-cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
<div class="inner-cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</div>
</body>
</html>
1 - 0
source code of - Ultra Advanced Creative Loader-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultra Advanced Creative Loader</title>
<style>
/* General Styles */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: radial-gradient(circle, #1a1a1a, #000);
color: #fff;
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.loader-container {
position: relative;
width: 300px;
height: 300px;
perspective: 1000px;
}
h2 {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: #ff6f61;
text-transform: uppercase;
letter-spacing: 2px;
}
/* 3D Cube Loader */
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotateCube 6s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 111, 97, 0.1);
border: 2px solid #ff6f61;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #fff;
opacity: 0.8;
box-shadow: 0 0 20px rgba(255, 111, 97, 0.5);
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes rotateCube {
0% { transform: rotateY(0deg) rotateX(0deg); }
100% { transform: rotateY(360deg) rotateX(360deg); }
}
/* Particle Effects */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background: #ff6f61;
border-radius: 50%;
box-shadow: 0 0 10px #ff6f61, 0 0 20px #ff6f61, 0 0 30px #ff6f61;
animation: float 3s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
50% { transform: translateY(-50px) scale(0.5); opacity: 0.5; }
}
/* Dynamic Background */
.dynamic-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent, rgba(255, 111, 97, 0.2));
animation: pulse 5s infinite alternate;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.5); opacity: 1; }
}
</style>
</head>
<body>
<div class="loader-container">
<h2>Loading...</h2>
<div class="cube">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
<div class="particles">
<!-- Particles will be generated by JavaScript -->
</div>
<div class="dynamic-bg"></div>
</div>
<script>
// JavaScript for Particle Effects
const particlesContainer = document.querySelector('.particles');
const numParticles = 50;
for (let i = 0; i < numParticles; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
particle.style.left = `${Math.random() * 100}%`;
particle.style.top = `${Math.random() * 100}%`;
particle.style.animationDelay = `${Math.random() * 3}s`;
particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 70%)`;
particlesContainer.appendChild(particle);
}
// JavaScript for Dynamic Background Color
const dynamicBg = document.querySelector('.dynamic-bg');
const colors = ['#ff6f61', '#61dafb', '#ffcc00', '#6bff61'];
let currentColorIndex = 0;
setInterval(() => {
dynamicBg.style.backgroundColor = colors[currentColorIndex];
currentColorIndex = (currentColorIndex + 1) % colors.length;
}, 2000);
</script>
</body>
</html>
0 - 0