• 0

كيف أُبرمج فلاش على شكل وميض باستعمال css3؟

حاليا، لدي الكود التالي المكتوب بتنسيق css3:

@-webkit-keyframes blinker {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s; 
}   

والغرض منه إظهار فلاش على شكل ومضات متتالية، لكن المشكلة أنه لا يعمل بشكل صحيح، فعند اختفائه لا يتم ذلك بتراجع في قيمة opacity، بل يختفي دُفعة واحدة، مما جعلني أفكّر في إعطاء 1.0 كقيمة للشفافية، لكن الأمر لم ينفع أيضا، هل من حل لهذه المشكلة؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

إليك هذا المثال، حيث سنعتمد إلى Jquery لإضافة تأثير الوميض على قطعة نصية، فلاش كما سميته أنت:

كود html الذي يتضمن وسمspan مع كلاس blink_me لتحديد العنصر من قبل Jquery:

<span class="blink_me">This Will Blink</span>

كود Jquery المتعلق بإظهار وإخفاء الرسالة بشكل متناسق:

(function blink() { 
    $('.blink_me').fadeOut(500).fadeIn(500, blink); 
})();

يمكن أيضا الاستعانة بهذه الدالة من كود Jquery، والتي تقوم مقام الدالة السابقة، لكن بطريقة مغايرة للطريقة المستعملة سابقاً:

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0.0; }
}

مثال تطبيقي.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن