اذهب إلى المحتوى
  • 0

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

فراس الامير

السؤال

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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 : لتحديد زمن التأخير عن بدء الحركة.


المصدر

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...