Elementor Text Stroke Slide Animation | Elementor pro Tips & Tricks | Elementor Pro Tutorial
In this tutorial, I'll show you How to Make Elementor Text Stroke Slide Animation Effect 🔥 No additional plugin is required!!
CSS CODE:
:root{
--myText : 'CUSTOM WP';
--textColor: #2CFF99;
--textStroke: 2px;
--anDuration: 6s;
}
selector{
-webkit-text-stroke: var(--textStroke) var(--textColor);
display: table;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
text-align: center;
margin: 0 auto
}
selector .elementor-heading-title::before{
content: var(--myText);
color: var(--textColor);
position: absolute;
top: 0;
width: 0%;
height: 100%;
text-align: left;
overflow: hidden;
white-space: nowrap;
border-right: var(--textStroke) solid var(--textColor);
-webkit-animation:animateX var(--anDuration) linear infinite;
animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
0%,10%,100%{
width:0%;
}
70%, 90%{
width: 100%;
}
}
@keyframes animateX{
0%,10%,100%{
width:0%;
}
70%, 90%{
width: 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
