Webleb - Snippets de Código

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>

Animação

Recomendado

Código HTML do interruptor de alternância CSS

Um código por ytr3d3

HTML

CSS

JS

Recomendado

Código HTML do interruptor de alternância CSS

Um código por ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS