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.
<section class="section">
<div class="text-wrapper">
<h1>codewarrier</h1>
<h1>codewarrier</h1>
</div>
</section>
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
Watch Some Other Topics