Elementor Water Wave TEXT Animation | Elementor pro Tips & Tricks | Elementor Pro Tutorial
In this tutorial, I'll show you How to Create Water Wave TEXT Animation Effect using Elementor Page Builder🔥🔥 No additional plugin is required!! 🔥
CSS CODE:
Back Heading CSS
selector{
-webkit-text-stroke: 2px #03a9f4;
}
Front Heading CSS
selector{
-webkit-animation: water 4s ease-in-out infinite;
animation: water 4s ease-in-out infinite;
}
@-webkit-keyframes water{
0%, 100%{
-webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
}
50%{
-webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
}
}
@keyframes water{
0%, 100%{
-webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
}
50%{
-webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
}
}
-----------------------------
Learn to create amazing WordPress websites without any coding knowledge Using Elementor Page Builder.
We will explore this amazing page builder in this course and create a complete business website during this course using Elementor .
You can start your freelancing career as a WordPress website designer watching this course and learning elementor.
Elementor Full Course:
• Wordpress Elementor tutorial 2021
WordPress Basic Course:
• Playlist
#customwp
#elementor pro
