"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > كيفية إنشاء حلقة الرسوم المتحركة النصية Fade In & Out \"Loading\" في CSS بدون JavaScript؟

كيفية إنشاء حلقة الرسوم المتحركة النصية Fade In & Out \"Loading\" في CSS بدون JavaScript؟

تم النشر بتاريخ 2024-11-11
تصفح:683

How to Create a CSS Fade In & Out \

حلقة رسوم متحركة بسيطة لـ CSS: Fade In & Out "تحميل" النص

لإنشاء رسوم متحركة متكررة في CSS تتلاشى داخل وخارج النص بدون استخدام JavaScript، ضع في اعتبارك ما يلي:

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

تحدد قاعدة @keyframes الرسوم المتحركة نفسها. في هذه الحالة، تقوم الرسوم المتحركة ببساطة بتغيير عتامة العنصر من معتم تمامًا إلى شفاف تمامًا ثم تعود مرة أخرى.

.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

تطبق فئة .animate-flicker الرسوم المتحركة على أي عنصر بهذه الفئة. تحدد خاصية الرسوم المتحركة اسم الصورة المتحركة، ومدة كل تكرار (في هذه الحالة، ثانية واحدة)، وما إذا كان يجب تكرار الرسوم المتحركة إلى ما لا نهاية.

هناك شيء واحد يجب ملاحظته وهو أن الكود أعلاه قد لا يعمل. في جميع المتصفحات. لضمان التوافق مع نطاق أوسع من المتصفحات، تحتاج إلى إضافة بادئات البائع المناسبة إلى خاصية الرسوم المتحركة. على سبيل المثال:

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

مع إضافة بادئات البائعين هذه، يجب أن تعمل الرسوم المتحركة في معظم المتصفحات الحديثة.

أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3