• 0

كيف أبطئ من حركة تأثيرات hover في CSS ؟

أنشأت دائرة ضمن صفحة HTML باستخدام تنسيقات CSS

وعند المرور عليها يزداد حجم الدائرة ولكن المشكلة أن الزيادة تكون سريعة

وكأنه يوجد تغييرين فقط، دائرة صغيرة ودائرة كبيرة

كيف أجعل الدائرة تكبر بشكل تدريجي عند المرور عليها؟

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


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

تستطيع جعل الحركة أكثر سلاسةً باستخدام التعليمة Transitions في CSS.

لنفرض أنه لديك الكود التالي :

.circle {
    width:35px;
    height:35px;
    border-radius:50px;
    background-color:#f00;
}
.circle:hover {
    height:50px;
    border-radius:50px;
}
<div class="circle"></div>

عند التنفيذ سيزداد حجم الدائرة بشكل مباشر, ولجعل زيادة الحجم بشكل تدريجي اكتب الكود التالي :

.circle {
    width:35px;
    height:35px;
    border-radius:50px;
    background-color:#f00;
    transition: all 200ms ease-in 0;
}
.circle:hover {
    height:50px;
    border-radius:50px;
    transition: all 300ms ease-in 0;
}
<div class="circle"></div>

تنقسم التعليمة transition إلى 4 أقسام سنحدد وظيفتها كما يلي :

transition: A B C D;

1- قسم A : لتحديد الخاصّية الذي نريد تحريكها بسلاسة كأن نحدد الإطار فقط أو كل العنصر.
2- قسم B : لتحديد سرعة الحركة.
3- قسم C : لتحديد شكل الحركة.
4- قسم D : لتحديد زمن التأخير عن بدء الحركة.


المصدر

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


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

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

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

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


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

تسجيل الدخول

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


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