Police de caractères dansante

1,388 byby.createsite

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 August 2025

Conception de sites Web, marketing numérique et services vidéo

11 September 2026

Refonte de Spotify

18 October 2025

Animation Sxrgxx de l'interface utilisateur du bouton CSS

HTML

CSS

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 user-select: none;
}

body {
 background-color: #000000;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 font-family: monospace;
 overflow: hidden;

}
/*container fonte */
.dancing-text {
 text-align: center;
 max-width: 600px;
}
/*estilo para cada letra individualmente, inclui animação */
.dancing-text span {
 display: inline-block;
 background: conic-gradient(
   from 45deg,
   #6b48ff,
   #a29bfe,
   #ffffff,
   #a29bfe,
   #6b48ff
   );
 -webkit-text-fill-color: transparent;
 background-size: 100%;
 font-size:3rem;
 background-clip: text;
 animation: dance 4s ease-in-out infinite;
 text-shadow: 0 0 10px rgba(0, 128, 255, 0.8), 0 0 20px rgba(0, 128, 255, 0.6);
}
/*delay para cada letra individualmente */
.dancing-text span:nth-child(1) { animation-delay: 0s; }
.dancing-text span:nth-child(2) { animation-delay: 0.1s; }
.dancing-text span:nth-child(3) { animation-delay: 0.2s; }
.dancing-text span:nth-child(4) { animation-delay: 0.3s; }
.dancing-text span:nth-child(5) { animation-delay: 0.4s; }
.dancing-text span:nth-child(6) { animation-delay: 0.5s; }
.dancing-text span:nth-child(7) { animation-delay: 0.6s; }
.dancing-text span:nth-child(8) { animation-delay: 0.7s; }
.dancing-text span:nth-child(9) { animation-delay: 0.8s; }
.dancing-text span:nth-child(10) { animation-delay: 0.9s; }
.dancing-text span:nth-child(11) { animation-delay: 1s; }
.dancing-text span:nth-child(12) { animation-delay: 1.1s; }

/*animação */
@keyframes dance {
 0%,100% {
  transform: rotateZ(20deg) translateY(-5px);

}

50% {
  transform:rotateZ(-20deg) translateY(5px);

}
}
.space{
 margin-left:5px;
 margin-right:5px;
}