Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Wave inside Text using pure CSS
Developers can use CSS to add animation to the HTML element. Here, we will use CSS to add a wavy effect inside the text. It will look like a real wave in text
Here, we have three approaches to add a wavy effect to the text. We will take a look at all approaches one by one.
Syntax
Users can follow the syntax below to add a wavy effect to the text.
@keyframes wavey {
0%,
100% {
/* add initial clip-path */
}
50% {
/* final clip path */
}
}
In the above syntax, we have created the keyframe, which is used to add animation to the text by changing the clip path of the text.
Example 1
In the example below, we created two <p> elements and added the same text inside both. Using CSS, we have placed text in such a way so that both override each other. We have set transperent color and a blue border for the first text value. For the second text, we have set the red color and wavy animation for the interval of 5 seconds.
To add animation, we change the value of the clip-path property. In CSS, clip-path property is used to show a particular region of the element and hides the other region by masking it out. For example, here we show the polygon in the text with the particular co-ordinates and hide the other region of the second text value.
<html>
<head>
<style>
.head {
font-size: 30px;
font-weight: 300;
}
/* set transparent color for first text */
.text:nth-child(1) {
color: transparent;
-webkit-text-stroke: 1px blue;
}
/* set wavy effect in the second text */
.text:nth-child(2) {
color: red;
animation: wavey 5s ease-in-out infinite;
}
.text {
font-size: 6rem;
position: absolute;
}
/* Add animation to the second text using the clip-path CSS property. */
@keyframes wavey {
0%,
100% {
clip-path: polygon(0 45%, 6% 38%, 20% 27%,
38% 24%, 40% 47%, 49% 64%, 51% 72%,
74% 78%, 79% 75%, 100% 67%, 100% 100%,
0 100%);
}
50% {
clip-path: polygon(0 59%, 5% 71%, 24% 86%,
34% 71%, 41% 64%, 41% 46%, 51% 35%,
74% 21%, 89% 35%, 100% 42%, 100% 100%,
0 100%);
}
}
</style>
</head>
<body>
<p class = "text"> TUTORIALSPOINT </p>
<p class = "text"> TUTORIALSPOINT </p>
<div class = "head"> Adding the <i> Wave effect inside the text </i> using HTML and CSS </div>
</body>
</html>
Example 2
In the example below, we used the ‘radial-gradient’ and ‘background-position’ CSS properties to add wavy effects to the HTML element. Here, we have added the radial gradient to the text with the same shape, same position, and a different color for every 25% part of the text.
In the animation keyframes, we change the background position of the background element, which moves the background element and generates the wavy effect in the text.
<html>
<head>
<style>
.text {
display: inline-block;
padding: 10px;
font-size: 40px;
font-weight: bold;
/* adding background using a gradient to the text */
background:
radial-gradient(100% 54% at top, blue 99%, red) calc(0*100%/3) 0,
radial-gradient(100% 58% at bottom, red 99%, blue) calc(3*100%/3) 0,
radial-gradient(100% 58% at top, blue 99%, red) calc(6*100%/3) 0,
radial-gradient(100% 58% at bottom, red 99%, blue) calc(9*100%/3) 0;
/* set up background size and repeat */
background-size: 50% 100%;
background-repeat: no-repeat;
/* setup text as a background clip */
-webkit-background-clip: text;
color: transparent;
background-clip: text;
animation: wavy 2s infinite linear;
}
@keyframes wavy {
/* change background-position */
to {
background-position:
calc(-6*100%/3) 0,
calc(-3*100%/3) 0,
calc(0*100%/3) 0,
calc(3*100%/3) 0;
}
}
</style>
</head>
<body>
<h2>Adding the <i> Wave effect inside the text </i> using HTML and CSS</h2>
<div class = "text">Welcome to the TutorialsPoint!</div>
</body>
</html>
Example 3
In the example below, rather than adding the wavy effect inside the text, we move every character of the text like a wave. Here, we have added every character of the text in the <span> element. After that, we added wave-text animation on every character.
In the ‘wave-text’ animation, we move the character in the Y direction using the transform CSS property. After that, we added the animation delay for every character by accessing characters using the ‘nth-child’ CSS property.
<html>
<head>
<style>
.text {
margin-top: 5rem;
}
.text span {
display: inline-block;
font-size: 3rem;
color: blue;
animation: wave-text 1.4s ease-in-out infinite;
}
.text span:nth-child(1) {
animation-delay: 0.0s;
}
.text span:nth-child(2) {
animation-delay: 0.1s;
}
.text span:nth-child(3) {
animation-delay: 0.2s;
}
.text span:nth-child(4) {
animation-delay: 0.3s;
}
.text span:nth-child(5) {
animation-delay: 0.4s;
}
.text span:nth-child(6) {
animation-delay: 0.5s;
}
.text span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes wave-text {
0% {
transform: translateY(0rem);
}
55% {
transform: translateY(-1.5rem);
}
100% {
transform: translateY(0rem);
}
}
</style>
</head>
<body>
<h2>Adding the <i> Wave effect inside the text </i> using HTML and CSS</h2>
<div class = "text">
<span> H </span>
<span> T </span>
<span> M </span>
<span> L </span>
<span> C </span>
<span> S </span>
<span> S </span>
</div>
</body>
</html>
Users learned to add the wavy effect inside the text. In the first approach, we used the ‘clip-path’ property to clip text in a polygon shape and add a wavy effect. In the second approach, we used the ‘radial-gradient’ and ‘background-position’ CSS properties for the animation. In the last approach, we transform the whole text using the ‘transform’ CSS property.
190 Views
