אנימציית סיבוב לטקסט עם תמונה סטטית

שאלה מצויינת :)

כדי לסובב רק את הרקע, את צריכה ידע נרחב בשימוש באנימציות CSS ובאלמנט פסאודו. במסלול אליפות בCSS תקבלי ידע מקצועי ומקיף כדי לכתוב איזה אנימציה שאת רוצה + הסבר מקיף ושימושים מתקדמים באלמנטים מסוג פסאודו.

ואם את מחפשת פתרון מהיר לעכשיו, הנה הוא:

הוספת אנימציה סיבוב קבועה רק לרקע של תמונה, כשהתמונה נשארת קבועה ולא מסתובבת

כדי לסובב רק את הרקע של אלמנט, את צריכה להוסיף את הרקע בקוד, ולא להכניס אותו דרך אלמנטור.

  1. הוסיפי לעמוד וידג’ט תמונה, ובחרי את התמונה הרצויה לך באלמנטור.
  2. כדי להוסיף תמונת רקע בקוד, הוסיפי את הקוד הבא לCSS מותאם אישית של וידג’ט תמונה:
selector img{
    position: relative !important;
}

selector .elementor-widget-container:before{
    content: "";
    width: 100%;
    height: 100%;
    background-image: url('https://chagitcourses.ussl.co.il/wp-content/uploads/Group-3515.svg') !important;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}
  1. שימי לב להחליף את תמונת הרקע המופיעה בקוד (background-image) לתמונת הרקע הרצויה לך.
  2. כדי שרק הרקע יסתובב, הוסיפי את האנימיציה הבאה להמשך הקוד:
selector .elementor-widget-container:before{
    animation: rotate1 1s linear infinite;
}

@keyframes rotate1{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
  1. אם התמונה מסתירה את הרקע המסתובב > במתקדם > פריסה > הוסיפי לה שוליים פנימיים

תצליחי,
חגית

4 תגובות

    1. שלום רחל :)

      ההדרכה הנ”ל מתאימה ל2 תמונות אחת על השניה (גם הטקסט מגיע כתמונה)
      נתיב טקסט זה משהו אחר.
      אעלה לך סרטון הדרכה מתאים בשיעורי הבונוס של קורס CSS במועדון האלופות.

      תצליחי המון,
      חגית

כתיבת תגובה

עוד הדרכות על CSS

דילוג לתוכן