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

अनुशंसित

12 July 2025

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

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

अनुशंसित

एनिमेशन

जादुई एनिमेशन बटन

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

index.html

styles.css

main.js

अनुशंसित

एनिमेशन

जादुई एनिमेशन बटन

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

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js