Webleb - Extraits de Code

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>

Animation

Recommandé

Bouton bascule HTML CSS

Basculement roulant

Un code de Farah

HTML

CSS

JS

Recommandé

Bouton bascule HTML CSS

Basculement roulant

Un code de Farah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS