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

Demonstração do jogo de física ragdoll Matter.js

Clone do Pinterest

HTML

CSS

JS

Recomendado

Demonstração do jogo de física ragdoll Matter.js

Clone do Pinterest

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS