Snake Border Animation Using Elementor | Elementor Pro Tutorial

197SHARES

Snake Border Animation CSS

selector{
    --animated-color-1: #00ccff;
    --animated-color-2: #d400d4;
    --background-color: #162052;
    --border-width: 100px;
    --c-height: 400px;
}


selector{
    height: var(--c-height);
}
selector:before{
    content: "";
    position: absolute;
    inset: -10px var(--border-width);
    background: linear-gradient(315deg, var(--animated-color-1), var(--animated-color-2));
    width: auto;
    height: auto;
    transition: all .3s;
    animation: animate 4s linear infinite;
}
@keyframes animate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
selector:after{
    background: var(--background-color);
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    z-index: 1;
}
selector:hover:before{
    inset: -20px 0px;
}
selector .content-section{
    height: 350px;
    width: 350px;
}
selector img{
    transition: all .5s;
}
selector:hover img{
    opacity: 0;
}
selector .elementor-widget-image{
    pointer-events: none;
}


/*Responsive*/
@media (max-width: 767px) {
selector{
    height: 350px;
}
selector .content-section{
    height: 320px;
    width: 320px;
}
}