Create Wave Text Effect Using Simple HTML And CSS Code

Create Wave Text Effect Using Simple HTML And CSS Code

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Wave Text Effect Using Simple HTML and CSS. Before That, We Could See What This Project Is About.

A Wave Text Effect effect is simply an animation in which we make the text animate in wave format. Here we have used a word and made the word to perform wave animation with the help of CSS only.

So,  Let’s Begin Our Wave Text Effect Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

 

HTML CODE For Wave Text Effect

<div class="logo is-animetion">
  <span>M</span>
  <span>S</span>
  <span>E</span>
  <span>E</span>
  <span>K</span>
</div>

 

Here in this HTML code, We have just added our text to make it wave. So for that, we are first creating a div class and inside of the div class, we just add a single by single word with the span tag, and then we close the div tag.

Beautiful CSS box-shadow | 100+ CSS box-shadow

Now We are going to perform a Wave Animation on the given text using the CSS code mentioned below.

CSS CODE For Wave Text Effect

.logo.is-animetion {
  margin-top: 0.6em;
}

.logo.is-animetion span {
  display: inline-block;
  animation: wave-text 1s ease-in-out infinite;
}

.logo.is-animetion {
  span:nth-of-type(1){ animation-delay: 0.0s; }
  span:nth-of-type(2){ animation-delay: 0.1s; }
  span:nth-of-type(3){ animation-delay: 0.2s; }
  span:nth-of-type(4){ animation-delay: 0.3s; }
  span:nth-of-type(5){ animation-delay: 0.4s; }
}

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

// Demo
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 2em;
  font-family: 'Courgette', cursive;
}

Now we added our CSS code Successfully. Here I am going to explain the code in steps that make you understand easily. So Let’s begin.

STEP 1: Now in this step, we just align and make the center of the content and fix the font family and size and these are done in the Body section.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 2em;
  font-family: 'Courgette', cursive;
}

 

STEP 2: In this step, we first called out the div class name (logo is-animation) and made it come down using the margin-top property, and then we just called out the spans inside the div class and fixed it to display in the same line using display: inline-block property and we giving the animation name in that with animation performance and timing.

.logo.is-animetion {
  margin-top: 0.6em;
}

.logo.is-animetion span {
  display: inline-block;
  animation: wave-text 1s ease-in-out infinite;
}

 

STEP 3: In this Last step, We again call out the div class and mention the span inside of it. But the span is mentioned with the nth-child property as because we are setting animation-delay property to every single word so for that, we are using nth-child also the nth child is declared by number (1,2,3..) for calling next, next span, and set a specific delay on the word.

Now lastly, We started performing  Wave Text Effect animation by declaring keyframes and the animation name and we started adding the percentage values to perform specific animations on the increasing percentages. and with transform: translate we just added the Wave Text Effect animation perfectly by giving some specific values to it.

.logo.is-animetion {
  span:nth-of-type(1){ animation-delay: 0.0s; }
  span:nth-of-type(2){ animation-delay: 0.1s; }
  span:nth-of-type(3){ animation-delay: 0.2s; }
  span:nth-of-type(4){ animation-delay: 0.3s; }
  span:nth-of-type(5){ animation-delay: 0.4s; }
}

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

Now, We have successfully created our project. So it’s time to preview the project in the mentioned Output Section.

Final Output Of Wave Text Effect


Now We have Successfully created our  Wave Text Effect Using Simple HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

50+ Front end Projects With Source Code

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Qrac

WRITTEN BY – Ragunathan S

Share on:

Leave a Comment