אֲטִימוּת ב-CSS הוא מאפיין המציין לשלוט בשקיפות של אלמנטים כגון תוֹכֶן אוֹ תמונות . באמצעות מאפיין זה, אנו יכולים להגדיר כל תמונה להיות אטומה לחלוטין ( גלוי ), שקוף לחלוטין ( מוּסתָר ), או שקוף (נראה חלקית). זה לוקח ערך מספרי נמצא בין 0 ל-1. כאשר 0 מגדיר שקוף לחלוטין ו-1 מגדיר גלוי לחלוטין. ערכי אטימות בין 0 ל-1, כגון 0.2, 0.4, 0.6 וכו', משנים תמונה משקופה לאטומה על ידי הגדלת הערך העשרוני בהדרגה.
תחביר
opacity :
הערך המספרי חייב להיות בין 0 ל-1 כדי להפוך את התמונה לשקופה למחצה. אם נספק 1, התמונה תהיה אטומה, אם הערך המספרי הוא 0, התמונה הופכת לשקופה לחלוטין.
סימון חוצה
דוגמה 1 : בדוגמה זו, נשתמש במאפיין אטימות כדי להפוך את האלמנט לשקוף בעת העברת העכבר מעל האלמנט.
Main.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. תְפוּקָה
העבר את העכבר מעל התיבה האדומה כדי להציג אפקט שקוף או אטימות.
רב צורתיות
אטימות מעבר ב-CSS
ב-CSS, א אטימות מעבר הוא מאפיין המשמש לשינוי חלק של מצב האטימות מרמה אחת למצב אחר. המשמעות היא שאטימות המעבר משנה את מצב האלמנט האטום לשקוף עם משך זמן מוגדר. למעבר יש ארבעה מאפיינים: transition-property, transition-duration, transition-timeting-function, ו-transition-delay, המשמשים לביצוע אפקט האטימות בתמונה. ה משך המעבר הוא תכונה חשובה לשינויים הדרגתיים או שינויים פתאומיים המשקפים את אפקט האטימות על אלמנט לאורך זמן מוגדר באלפיות שניות או שניות.
מאפיין הקיצור של המעבר הוא כדלקמן:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
תחביר להגדרת אטימות המעבר ב-CSS
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } נכס מעבר
להלן מאפייני המעבר המשמשים לשליטה באפקטי המעבר.
| ערך | תיאור |
|---|---|
| מעבר- רכוש | הוא משמש להגדרת השם של מאפיין ה-CSS המציג את אפקט המעבר לתמונות. |
| משך המעבר | הוא משמש להגדרת פרק הזמן בשניות או אלפיות שניות כדי להציג את אפקט המעבר. |
| מעבר-תזמון-פונקציה | הוא משמש להגדרת עקומת המהירות בתמונה כדי להראות את אפקט המעבר. |
| מעבר- עיכוב | מציין אם אפקט המעבר מופעל על האלמנט או התמונה. |
הערה: בעת הגדרת מאפיין המעבר לתמונה או לתוכן, עלינו להגדיר את מאפיין המעבר-משך; אחרת, משך הזמן הופך ל-0, והוא לא יראה שום השפעה.
הצורך באטימות מעבר ב-CSS
ה אֲטִימוּת הוא מאפיין CSS פשוט המשמש לשליטה בשקיפות של תמונה על ידי הגדרת טווח האטימות מ-0 ל-1. הוא משקף את השינוי הסטטי או הפתאומי באלמנט כדי להראות את אפקט האטימות. לדוגמה, אם אנחנו רוצים להציג תמונה כשקופה, עלינו להגדיר את ערך האטימות מ-0 ל-1. לאחר מכן, היא מציגה את אפקט האטימות מיד במקום לקחת קצת זמן. לכן, אנו משתמשים ב-a אטימות מעבר ב-CSS השולט בשקיפות של אלמנט לאורך פרק זמן מוגדר. באמצעות פונקציית הזמן-מעבר באטימות מעבר, נוכל לקבוע את עקומת המהירות של אלמנט המציין את אפקט האטימות המהירה על תמונה. בדרך זו, אנו משתמשים באפקט האטימות המעבר כדי לשקף שינויים בפרק הזמן שצוין במקום להתרחש באופן מיידי.
דוגמה 2: בדוגמה זו, אנו הולכים להשתמש במאפיין אטימות המעבר המשקף את אפקט האטימות בפרק זמן מוגדר במקום באופן מיידי.
File1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> תְפוּקָה
שנה שם ספרייה בלינוקס
