Dancing font

Open In Editor Publish Your Code

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

Dancing font

Recommended

CSS Toggle Menu with Font Awesome Icons

dancing emoji

dancing code

HTML

CSS

JS

Recommended

CSS Toggle Menu with Font Awesome Icons

dancing emoji

dancing code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS