شرح شرح عمل نبض وميض على زر التسجيل

[cherki]

شرح عمل نبض وميض على زر التسجيل Pulsing Register Button



هل ترغب في جذب انتباه الزوار الذين يزورون المنتدى؟

بعد تشغيل الكود التالي ، سيظهر زر "التسجيل" حول نبضات القلب.

نتيجة:

الطريقة كالتالي:



1 : إضافة إلى القالب extra.less

/* PULSE ANIMATION */
.pulse {
    position: relative;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse:hover {
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

2: في قالب "Page_container" ، ابحث عن :

<span class="p-navgroup-linkText">{{ phrase('register') }}</span>

غيره بالكود التالي:

<span class="p-navgroup-linkText"><span class="pulse">{{ phrase('register') }}</span></span>

انتهينا اتمنى ان ينال اعجابكم تقبلوا فائق تحياتي






​

 

[أسيرالشوق]

شكراً على حضورك ومشاركتك

 

[super- power]

بارك الله فيك