ستوفر هذه المقالة:
- الطريقة الأولى: تأثير التلاشي باستخدام خاصية الرسوم المتحركة في CSS
- الطريقة 2: تأثير التلاشي باستخدام خاصية انتقال CSS
الطريقة الأولى: تأثير التلاشي باستخدام خاصية 'الرسوم المتحركة' في CSS
لتصميم صفحة HTML بسيطة ، أضف العنصر التالي إليها:
- أضف ال ' 'جنبًا إلى جنب مع' نمط ' ينسب. تحتوي سمة 'style' على خصائص تصميم العنصر.
- تطبيق ' اللون 'في سمة النمط لتحديد لون نص العنصر.
- بعد ذلك ، استخدم ' 'لإضافة نص أو فقرة بسيطة.
فيما يلي رمز HTML:
< h2 نمط = 'اللون: rgb (84 ، 8 ، 191)' >
موقع Linuxhint التعليمي
< / h2 >
< ص > تأثير التلاشي عند تحميل الصفحة < / ص >
تم إنشاء صفحة HTML بنجاح:
في قسم CSS ، لتطبيق تأثير التلاشي على الصفحة ، فإن الخيار ' حيوية 'سيتم استخدام خاصية CSS في' <الجسم> 'في صفحة HTML.
عنصر نمط 'الجسم'
الجسم {الرسوم المتحركة: سهولة fadeInPage 3s ؛
عدد التكرار للرسوم المتحركة: واحد ؛
}
يتم تطبيق '
' مع خصائص CSS التالية:- ' حيوية 'هي خاصية الاختصار التي تحدد الرسوم المتحركة من خلال تحديد قيم متعددة. هنا ، يتم تحديد اسم الحركة ووظيفة توقيت الرسوم المتحركة ومدة الرسوم المتحركة.
- ' الرسوم المتحركة-التكرار-العد 'عدد مرات تكرار الرسم المتحرك.
تطبيق قواعد 'keyframes' على 'الرسوم المتحركة'
تضمين التغريدة {0 ٪ {
العتامة: 0 ؛
}
100 ٪ {
العتامة: واحد ؛
}
}
لتعريف “ تضمين التغريدة 'للرسوم المتحركة ، اذكر اسم الحركة بعد الكلمة الأساسيةkeyframes. قم بتعديل سلوك الرسوم المتحركة كما يلي:
- في ' 0٪ 'الرسوم المتحركة ،' العتامة 'يتم تعيين القيمة 0. وهذا يعني أنه عندما يبدأ الرسم المتحرك ، تكون الصورة شفافة.
- في ' 100٪ 'الرسوم المتحركة ، يتم تعيين التعتيم على' واحد '، الذي يشير إلى لون خالص.
انتاج |
دعنا ننتقل إلى الطريقة الثانية لتطبيق تأثير التلاشي على تحميل الصفحة.
الطريقة 2: تأثير التلاشي باستخدام خاصية 'الانتقال' في CSS
إضافة ' تفريغ 'ضمن' <الجسم> ' جزء. يتم تشغيل هذا الحدث عند تحميل الصفحة. عند التحميل ، يتم ضبط عتامة عنصر الجسم على ' واحد '، والتي تتعلق بلون خالص:
< الجسم تفريغ = 'document.body.style.opacity = '1'' >في هذا المثال ، فإن CSS ' انتقال 'لإضافة تأثير التلاشي:
الجسم {العتامة: 0 ؛
الانتقال: العتامة 6s ؛
}
فيما يلي شرح للخصائص المذكورة أعلاه:
- ' العتامة تحدد خاصية 'شفافية العناصر.
- باستخدام CSS ' انتقال '، قم بتغيير قيم الخصائص تدريجيًا خلال فترة زمنية محددة.
انتاج |
لقد علمنا لك طرق استخدام CSS لتأثير التلاشي عند تحميل الصفحة.
استنتاج
يمكن استخدام العديد من خصائص CSS لتطبيق تأثير التلاشي على عناصر HTML. وبشكل أكثر تحديدًا ، فإن ' حيوية '،' العتامة '، و ' انتقال 'يمكن استخدام الخصائص المتحركة لتحديد تأثيرات الحركة على الصفحات أو العناصر. يتم ضبط الرسوم المتحركة باستخدام ' تضمين التغريدة ' قواعد. توضح هذه المقالة طرق إضافة تأثير التلاشي على تحميل الصفحة باستخدام CSS.