Police de caractères dansante

826 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 June 2024

Carte animée des réseaux sociaux

23 July 2025

Modèle HTML CSS de carte de profil Neumorphic

17 December 2024

Terminal de piratage

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

Recommandé

Carte animée des réseaux sociaux

Modèle HTML CSS de carte de profil Neumorphic

Terminal de piratage

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS