3D पाठ प्रभाव

997 ledoc

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

अनुशंसित

13 November 2024

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

30 August 2024

स्लाइस टेक्स्ट प्रभाव

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 पाठ प्रभाव

अनुशंसित

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

3D कार्ड होवर प्रभाव

स्लाइस टेक्स्ट प्रभाव

HTML

CSS

JS

अनुशंसित

शुद्ध CSS का उपयोग करके छवियों पर फ्रेम प्रभाव

3D कार्ड होवर प्रभाव

स्लाइस टेक्स्ट प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS