Wave Text

Home / Web Code Snippet / Wave Text

Wave Text

https://youtube.com/shorts/jEkriJym5Yg?si=EKIdTvPyEMTRytux

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <div class="container">
          <span>S</span>
          <span>A</span>
          <span>K</span>
          <span>S</span>
          <span>H</span>
          <span>A</span>
          <span>M</span>
          <span>D</span>
          <span>I</span>
          <span>G</span>
          <span>I</span>
          <span>T</span>
          <span>A</span>
          <span>L</span>
          </p>
    </div>
</body>
</html>

CSS CODE:-

body {
            padding: 0;
            margin: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 100vh;
              background: black;
        }
        .container{
            color: white;
            text-transform: uppercase;
            font-size: 40px;
            font-family: cursive;
        }
        .container span {
              display: inline-block;
              animation: animate 1s ease-in-out infinite;   
        }
        .container span:nth-of-type(1){
            animation-delay: 0.0s;
        }
        .container span:nth-of-type(2){
            animation-delay: 0.1s;
        }
        .container span:nth-of-type(3){
            animation-delay: 0.2s;
        }
        .container span:nth-of-type(4){
            animation-delay: 0.3s;
        }
        .container span:nth-of-type(5){
            animation-delay: 0.4s;
        }
        .container span:nth-of-type(6){
            animation-delay: 0.5s;
        }
        .container span:nth-of-type(7){
            animation-delay: 0.6s;
        }
        .container span:nth-of-type(8){
            animation-delay: 0.7s;
        }
        .container span:nth-of-type(9){
            animation-delay: 0.8s;
        }
        .container span:nth-of-type(10){
            animation-delay: 0.9s;
        }
        .container span:nth-of-type(11){
            animation-delay: 1.0s;
        }
        .container span:nth-of-type(12){
            animation-delay: 1.1s;
        }
        .container span:nth-of-type(13){
            animation-delay: 1.2s;
        }
        .container span:nth-of-type(14){
            animation-delay: 1.3s;
        }

        @keyframes animate{
          0%{
            transform: translateY(0px);
          }
          50%{
            transform: translateY(-30px);
          }
          100%{
            transform: translateY(0px);
          }
    }