In this article, a wavy animated text is implemented using HTML and CSS. It is one of the simplest CSS effects. For a beginner, it is one of the best examples to learn the concept of CSS pseudo-elements.
Approach: The basic idea of getting wavy texts is performed by using the combination of some CSS attributes. The main “body” part is created by using <span> tag inside <body> tag. CSS code is used to create wavy texts of the “body” part of the HTML structure.
HTML code: The following code snippet demonstrates the design of the text used for wavy effect by using HTML tags in the web page.
< div class = "wavy" >
< span style = "--i:1" >G</ span >
< span style = "--i:2" >E</ span >
< span style = "--i:3" >E</ span >
< span style = "--i:4" >K</ span >
< span style = "--i:5" >S</ span >
< span style = "--i:6" > </ span >
< span style = "--i:7" >F</ span >
< span style = "--i:8" >O</ span >
< span style = "--i:9" >R</ span >
< span style = "--i:10" > </ span >
< span style = "--i:11" >G</ span >
< span style = "--i:12" >E</ span >
< span style = "--i:13" >E</ span >
< span style = "--i:14" >K</ span >
< span style = "--i:15" >S</ span >
< span style = "--i:16" >.</ span >
< span style = "--i:17" >.</ span >
< span style = "--i:18" >.</ span >
< span style = "--i:19" >.</ span >
< span style = "--i:20" >.</ span >
</ div >
|
Final code: This example displaying the complete code to make a vertical wavy text line using HTML and CSS.
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
< style type = "text/css" >
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(6, 75, 21);
}
.wavy {
position: relative;
}
.wavy span {
position: relative;
display: inline-block;
color: #fff;
font-size: 2em;
text-transform: uppercase;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-20px);
}
40%,
100% {
transform: translateY(0px);
}
}
</ style >
</ head >
< body >
< div class = "wavy" >
< span style = "--i:1" >G</ span >
< span style = "--i:2" >E</ span >
< span style = "--i:3" >E</ span >
< span style = "--i:4" >K</ span >
< span style = "--i:5" >S</ span >
< span style = "--i:6" > </ span >
< span style = "--i:7" >F</ span >
< span style = "--i:8" >O</ span >
< span style = "--i:9" >R</ span >
< span style = "--i:10" > </ span >
< span style = "--i:11" >G</ span >
< span style = "--i:12" >E</ span >
< span style = "--i:13" >E</ span >
< span style = "--i:14" >K</ span >
< span style = "--i:15" >S</ span >
< span style = "--i:16" >.</ span >
< span style = "--i:17" >.</ span >
< span style = "--i:18" >.</ span >
< span style = "--i:19" >.</ span >
< span style = "--i:20" >.</ span >
</ div >
</ body >
</ html >
|
Output: