एनिमेशन

897 kevekıbhack

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

19 November 2025

Google लॉगिन और रिस्पॉन्सिव मेनू HTML कोड

10 September 2024

ग्लासमोर्फिज्म उत्पाद कार्ड

29 December 2024

ki ok nj den

HTML

<!DOCTYPE html>

<head>

<title>Enhanced Loading Animation</title>

<style>

html, body {

height: 100%;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);

background-size: 400% 400%;

animation: gradientBG 15s ease infinite;

font-family: "Arial", sans-serif;

overflow: hidden;

}

.loader {

text-align: center;

font-size: 3.5em;

font-weight: bold;

color: #fff;

letter-spacing: 0.15em;

position: relative;

padding: 30px;

border-radius: 20px;

background: rgba(0, 0, 0, 0.2);

box-shadow: 0 0 30px rgba(0, 0, 0, 0.5),

inset 0 0 10px rgba(255, 255, 255, 0.2);

}

.loader::before {

content: "";

position: absolute;

top: -5px;

left: -5px;

right: -5px;

bottom: -5px;

border-radius: 25px;

background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ffcc00);

background-size: 400% 400%;

z-index: -1;

animation: borderGlow 8s ease infinite;

filter: blur(10px);

opacity: 0.7;

}

.loader span {

display: inline-block;

position: relative;

text-transform: uppercase;

animation: bounce 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate,

pulse 1.8s ease-in-out infinite,

colorShift 4s linear infinite;

text-shadow: 0 0 15px currentColor;

filter: brightness(1.2);

margin: 0 2px;

}

.loader span::before {

content: "";

position: absolute;

bottom: -10px;

left: 0;

width: 100%;

height: 3px;

background: currentColor;

border-radius: 50%;

filter: blur(2px);

opacity: 0.7;

transform: scaleX(0);

animation: dotScale 0.6s ease infinite alternate;

}

.loader span::after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(90deg, rgba(255,255,255,0.4), transparent);

transform: skewX(-15deg);

animation: shine 2.5s infinite;

opacity: 0.6;

}

.loader span:nth-child(1) { animation-delay: 0.0s; color: #ff5e62; }

.loader span:nth-child(2) { animation-delay: 0.1s; color: #ff9966; }

.loader span:nth-child(3) { animation-delay: 0.2s; color: #ffcc33; }

.loader span:nth-child(4) { animation-delay: 0.3s; color: #33cc33; }

.loader span:nth-child(5) { animation-delay: 0.4s; color: #3399ff; }

.loader span:nth-child(6) { animation-delay: 0.5s; color: #9966ff; }

.loader span:nth-child(7) { animation-delay: 0.6s; color: #ff66cc; }

@keyframes bounce {

0% { transform: translateY(0px) rotate(0deg); }

100% { transform: translateY(-20px) rotate(5deg); }

}

@keyframes gradientBG {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

@keyframes pulse {

0%, 100% { transform: scale(1); }

50% { transform: scale(1.15); }

}

@keyframes shine {

0% { left: -100%; }

20% { left: 100%; }

100% { left: 100%; }

}

@keyframes colorShift {

0%, 100% { color: inherit; }

50% { color: white; }

}

@keyframes dotScale {

0% { transform: scaleX(0); opacity: 0; }

100% { transform: scaleX(1); opacity: 0.7; }

}

@keyframes borderGlow {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

/* Floating particles */

.particle {

position: absolute;

background: rgba(255, 255, 255, 0.6);

border-radius: 50%;

filter: blur(2px);

animation: float linear infinite;

}

@keyframes float {

0% { transform: translateY(0) rotate(0deg); opacity: 0; }

10% { opacity: 1; }

90% { opacity: 1; }

100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }

}

</style>

</head>

<body>

</div>

// Create floating particles

document.addEventListener('DOMContentLoaded', function() {

const body = document.body;

const particleCount = 20;

for (let i = 0; i < particleCount; i++) {

const particle = document.createElement('div');

particle.classList.add('particle');

// Random properties

const size = Math.random() * 10 + 5;

const duration = Math.random() * 10 + 10;

const delay = Math.random() * 15;

const left = Math.random() * 100;

particle.style.width = `${size}px`;

particle.style.height = `${size}px`;

particle.style.left = `${left}vw`;

particle.style.bottom = `-${size}px`;

particle.style.animationDuration = `${duration}s`;

particle.style.animationDelay = `${delay}s`;

body.appendChild(particle);

}

});

</script>

</body>

</html>

एनिमेशन

अनुशंसित

Google लॉगिन और रिस्पॉन्सिव मेनू HTML कोड

ग्लासमोर्फिज्म उत्पाद कार्ड

ki ok nj den

HTML

CSS

JS

अनुशंसित

Google लॉगिन और रिस्पॉन्सिव मेनू HTML कोड

ग्लासमोर्फिज्म उत्पाद कार्ड

ki ok nj den

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS