Animation de texte laser

Video Publiez votre code

Recommandé

30 June 2025

Bouton de téléchargement animé

index.html

styles.css

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;
 }
}

Animation de texte laser

Recommandé

Un code de Metr

Coup de poupée de chiffon

Bouton de téléchargement animé

index.html

styles.css

main.js

Recommandé

Un code de Metr

Coup de poupée de chiffon

Bouton de téléchargement animé

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js