Police de caractères dansante

243 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 June 2025

Un code par wsss

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

Police de caractères dansante

Recommandé

Un code par alejandrokundrah

Page de connexion HTML

Un code par wsss

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Page de connexion HTML

Un code par wsss

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS