Find the code used in this tutorial in below
CSS code used:
.elementor-field-textual:focus::-webkit-input-placeholder
{
color: #ffffff;
transform: translateY(-16px);
font-size: 0.65em;
}
.gradient-form i{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #fff;
overflow: hidden;
}
.gradient-form i::before{
content: '';
position: absolute;
left: -50%;
width:100%;
height: 100%;
background: linear-gradient(90deg, #ff1b69,#ff0000,#2196f3,#9c27b0,#ff1b69);
animation: animate 2s linear infinite;
transition: 0.5s;
}
.gradient-form input:valid ~ i::before,
.gradient-form input:focus ~ i::before
{
left: 0;
}
@keyframes animate
{
0%{
background-position-x: 0;
}
100%{
background-position-x: 800px;
}
}
Js Code used:
<script>
let ef = document.querySelectorAll(".gradient-form .elementor-field-group");
let efLength = ef.length;
for(let i=0; i < efLength-1;i++){
ef[i].appendChild(document.createElement('i'));
}
</script>