פיתוח

48

אנימציות CSS משוגעות עם אלמנטור!

הקבצים:

הקודים שבסרטון:

    
     /*--------------אופנוע------------*/


/*גלגלים*/
#right-wheel, #left-wheel{
    animation: wheels 4s infinite linear;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes wheels{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}


/*גוף*/
#body{
    animation: body 0.4s infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

@keyframes body{
    0%{
        transform: rotatex(0deg);
    }
    
    100%{
        transform: rotatex(16deg);
    }
}


/*---------------רקע-------------*/


/*רקע ראשון*/
#section{
    animation: background-1 8000s infinite linear;
}

@keyframes background-1{
    from{
        background-position: 10000vw;
    }
}


/*רקע שני*/
#section .elementor-background-overlay{
    animation: background-2 5000s infinite linear;
}

@keyframes background-2{
    from{
        background-position: 10000vw;
    }
}


/*רקע שלישי*/
#column .elementor-widget-wrap{
    animation: background-3 2500s infinite linear;
}

@keyframes background-3{
    from{
        background-position: 10000vw;
    }
}


/*רקע רביעי*/
#column .elementor-background-overlay{
    animation: background-4 1400s infinite linear;
}

@keyframes background-4{
    from{
        background-position: 10000vw;
    }
}
    
   

הרשמו לעדכונים במייל

ואל תפספסו אף זום חינמי, סדנה חדשה או מדריך שווה!