محمود سعداوي2 نشر 3 يونيو 2022 أرسل تقرير نشر 3 يونيو 2022 السلام عليكم. في المثال التالي، عندما أقوم بhover للعنصر أريد أن يكون إتجاه التحريك من الأسفل إلى الأعلى. ملاحظة: التحريك في هذه الحالة من الأعلى للأسفل شيفرة css: div{ margin: 30px auto; background-color: #5FD068; width: 40%; height: 30px; border-radius: 10px; font-size: 40px; /* height: 0; */ transition: height 2s; } div:hover{ height: 300px; } شكرا لكم. 1 اقتباس
0 عمر قره محمد نشر 3 يونيو 2022 أرسل تقرير نشر 3 يونيو 2022 للتحريك من الاسفل للأعلى يجب استخدام ال transform : div { margin: 30px auto; background-color: #5fd068; width: 40%; height: 30px; border-radius: 10px; font-size: 40px; /* height: 0; */ transition: transform 2s; transform-origin: bottom center; } div:hover { transform: scaleY(2); } حيث لا تستطيع التحكم باتجاه الحركة عند استخدام ال height لذلك نذهب لـ transform: scaleY(2) بدلاً عنها لأنها تمكننا من التحكم بال transform-origin، وبالتالي التحكم باتجاه الحركة. إن كنت مهتم بالتحريك يمكنك قراءة هذا المقال عن ال animations : 1 اقتباس
السؤال
محمود سعداوي2
السلام عليكم.
في المثال التالي، عندما أقوم بhover للعنصر أريد أن يكون إتجاه التحريك من الأسفل إلى الأعلى.
ملاحظة: التحريك في هذه الحالة من الأعلى للأسفل
شيفرة css:
div{ margin: 30px auto; background-color: #5FD068; width: 40%; height: 30px; border-radius: 10px; font-size: 40px; /* height: 0; */ transition: height 2s; } div:hover{ height: 300px; }شكرا لكم.
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.