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é

Modèle de formulaire de connexion matérielle

Animation Sxrgxx de l'interface utilisateur du bouton CSS

3D

HTML

CSS

JS

Recommandé

Modèle de formulaire de connexion matérielle

Animation Sxrgxx de l'interface utilisateur du bouton CSS

3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS