![wave animation](https://codewarrier.com/wp-content/uploads/2024/04/wave-animation.gif)
Text Wave Animation
Here, we create text wave animation using HTML and CSS.
Project Folder Structure
Before we start coding we take a look at the project folder structure. We start by creating a folder called – “Text Animation” Inside this folder, we have 2 files. Create these files like below:
- index.html
- style.css
HTML
We create text wave animation using HTML code. Copy the code below and paste it into your index.html file.
codewarrier
codewarrier
CSS
We create text wave animation using CSS code. Copy the code below and paste it into your style.css file.
body {
display: flex;
background: #000;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.text-wrapper {
position: relative;
}
.text-wrapper h1 {
color: #fff;
font-size: 8em;
position: absolute;
transform: translate(-50%, -50%);
}
.text-wrapper h1:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px #1aff00;
}
.text-wrapper h1:nth-child(2) {
color: #1aff00;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
0%,
100% {
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
50% {
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
}
CODEPEN
![wave animation](https://codewarrier.com/wp-content/uploads/2024/04/wave-animation-1024x453.png)
Watch Some Other Topics