Webleb - Snippet di Codice -

Pubblica il Tuo Codice

Consigliato

8 October 2025

Animazione di caricamento CSS Struttura HTML

21 December 2024

html, body {
  height: 100%;
  overflow: hidden;
  user-select: none;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(#000000, #000);
}
h1 {
  font: 300 80px/1 courier;
  white-space: nowrap;
  color: whitesmoke;
}
span {
  display: inline-block;
  animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite;
  transform-origin: center;
}
span:nth-of-type(1) {
  animation-delay: 0.25s;
}
span:nth-of-type(2) {
  animation-delay: 0.5s;
}
span:nth-of-type(3) {
  animation-delay: 0.75s;
}
span:nth-of-type(4) {
  animation-delay: 1s;
}
span:nth-of-type(5) {
  animation-delay: 1.25s;
}
span:nth-of-type(6) {
  animation-delay: 1.5s;
}
span:nth-of-type(7) {
  animation-delay: 1.75s;
}
span:nth-of-type(8) {
  animation-delay: 2s;
}
span:nth-of-type(9) {
  animation-delay: 2.25s;
}
span:nth-of-type(10) {
  animation-delay: 2.5s;
}
@keyframes stretch {
  5% {
    transform: scaleX(5000);
    opacity: 0.1;
 }
  15% {
    transform: scaleX(1);
    opacity: 1;
 }
}

Consigliato

Animazione di caricamento CSS Struttura HTML

Un codice di cleancloud166

Subway Surfer

index.html

styles.css

main.js

Consigliato

Animazione di caricamento CSS Struttura HTML

Un codice di cleancloud166

Subway Surfer

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js