Fonte dançante

242 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

11 July 2025

Menu de alternância CSS com ícones de fonte impressionantes

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

Recomendado

Menu de alternância CSS com ícones de fonte impressionantes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS