लेज़र टेक्स्ट एनिमेशन

4599 webleb

अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

25 May 2024

स्लाइडिंग दरवाज़ों की कला में निपुणता: CSS और GSAP एनिमेशन तकनीक

20 March 2024

एनिमेशन के साथ HTML लैंडिंग पेज टेम्पलेट

12 July 2025

एनिमेशन

index.html

styles.css

html, body {
  height: 100%;
  overflow: hidden;
  user-select: none;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(#000000, #000);
}
h1 {
  font: 300 80px/1 courier;
  white-space: nowrap;
  color: whitesmoke;
}
span {
  display: inline-block;
  animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite;
  transform-origin: center;
}
span:nth-of-type(1) {
  animation-delay: 0.25s;
}
span:nth-of-type(2) {
  animation-delay: 0.5s;
}
span:nth-of-type(3) {
  animation-delay: 0.75s;
}
span:nth-of-type(4) {
  animation-delay: 1s;
}
span:nth-of-type(5) {
  animation-delay: 1.25s;
}
span:nth-of-type(6) {
  animation-delay: 1.5s;
}
span:nth-of-type(7) {
  animation-delay: 1.75s;
}
span:nth-of-type(8) {
  animation-delay: 2s;
}
span:nth-of-type(9) {
  animation-delay: 2.25s;
}
span:nth-of-type(10) {
  animation-delay: 2.5s;
}
@keyframes stretch {
  5% {
    transform: scaleX(5000);
    opacity: 0.1;
 }
  15% {
    transform: scaleX(1);
    opacity: 1;
 }
}

अनुशंसित

स्लाइडिंग दरवाज़ों की कला में निपुणता: CSS और GSAP एनिमेशन तकनीक

एनिमेशन के साथ HTML लैंडिंग पेज टेम्पलेट

एनिमेशन

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js