3D पाठ प्रभाव

1270 ledoc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

22 September 2025

आँकड़ों और अनुकूलन के साथ 3D क्यूब गेम HTML

30 September 2025

होवर प्रभाव के साथ CSS स्फीयर एनीमेशन

5 July 2025

गड़बड़ प्रभाव होमपेज: HTML, CSS, टेलविंड

HTML

CSS

.waveTextAnimated {
  margin-top: 0.6em;
  font-size: 50px;
  text-align: center;
}

.waveTextAnimated span {
  display: inline-block;
  -webkit-animation: wave-text 1s ease-in-out infinite;
  animation: wave-text 1s ease-in-out infinite;
}

.waveTextAnimated span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.waveTextAnimated span:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.waveTextAnimated span:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.waveTextAnimated span:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.waveTextAnimated span:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@-webkit-keyframes wave-text {
  00% {
    transform: translateY(0em);
  }
  60% {
    transform: translateY(-0.6em);
  }
  100% {
    transform: translateY(0em);
  }
}

@keyframes wave-text {
  00% {
    transform: translateY(0em);
  }
  60% {
    transform: translateY(-0.6em);
  }
  100% {
    transform: translateY(0em);
  }
}

अनुशंसित

आँकड़ों और अनुकूलन के साथ 3D क्यूब गेम HTML

होवर प्रभाव के साथ CSS स्फीयर एनीमेशन

गड़बड़ प्रभाव होमपेज: HTML, CSS, टेलविंड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS