יצירה ועריכה של אפקטי מעבר של CSS3 ב-Dreamweaver

עודכן לאחרונה בתאריך 25 באפריל 2024

ניתן ליצור, לשנות ולמחוק מעברי CSS3 באמצעות החלונית CSS Transitions.

כדי ליצור מעבר CSS3, צור מחלקת מעברים על-ידי ציון ערכים עבור מאפייני המעברים של הרכיב. אם תבחר רכיב לפני יצירת מחלקת המעברים, המחלקה תוחל באופן אוטומטי על הרכיב שנבחר.

אתם יכולים לבחור להוסיף את קוד ה-CSS שנוצר למסמך הנוכחי או לציין קובץ CSS חיצוני.

יצירה והחלה של אפקט מעבר של CSS3

(אופציונלי) בחר רכיב (פיסקה, כותרת וכן הלאה) שעליו ברצונך להחיל את המעבר. לחלופין, ניתן ליצור מעבר ולהחיל אותו על רכיב כלשהו בשלב מאוחר יותר.

בחרו Window > CSS Transitions.

לחץ על .

צור מחלקת מעברים באמצעות האפשרויות בתיבת הדו-שיח New Transition.

Target Rule

הזן שם לבורר. הבורר יכול להיות בורר CSS מכל סוג שהוא, כגון תג, כלל, מזהה או בורר מורכב. לדוגמה, אם ברצונך להוסיף אפקטי מעבר לכל התגים מסוג <hr>‎, הזן את הערך hr

Transition On

בחר מצב שעליו ברצונך להחיל את המעבר. לדוגמה, אם ברצונך להחיל את המעבר כשהעכבר עובר מעל הרכיב, השתמש באפשרות Hover.

Use the Same Transition for All Properties

בחרו באפשרות זו אם אתם רוצים לציין את אותו Duration, Delay ו-Timing Function עבור כל מאפייני ה-CSS שברצונכם להחיל עליהם מעבר.

Use a Different Transition for Each Property

בחר באפשרות זו אם ברצונך לציין ערכים שונים עבור Duration‏, Delay‏, ו-Timing Function לכל מאפיין CSS שבו ברצונך להשתמש במעבר.

Property

לחץ על כדי להוסיף מאפיין CSS למעבר.

Duration

הזן משך זמן בשניות (s) או באלפיות השנייה (ms) עבור אפקט המעבר.

Delay

הזמן, בשניות או באלפיות שנייה, לפני תחילת אפקט המעבר.

Timing function

בחר סגנון מעבר מבין האפשרויות הזמינות.

End Value

ערך הסיום של אפקט המעבר. לדוגמה, אם ברצונך להגדיל את הגופן ל-‎40px בסוף אפקט המעבר, ציין ‎40px עבור מאפיין גודל הגופן.

Choose Where To Create The Transition

להטבעת הסגנון במסמך הנוכחי, בחר This Document Only.

אם ברצונך ליצור גיליון סגנונות חיצוני עבור קוד CSS3, בחר New Style Sheet File. בעת הלחיצה על Create Transition, אתה מתבקש לספק מיקום לשמירת קובץ ה-CSS החדש. לאחר יצירת גיליון הסגנונות, הוא נוסף לתפריט Choose Where To Create Transition.