طريقة جعل العنصر يدور عند تمرير الماوس فوقه بواسطة CSS
في هذا المقال ستتعلم كيف تجعل العنصر يدور في مكانه عند تمرير مؤشر الماوس ( Mouse Cursor ) فوقه بخطوات بسيطة جداً.
مبدأ جعل العنصر يدور
بشكل عام لجعل العنصر قابل للدوران يجب أن يكون له حجم بحيث نستطيع تمرير الماوس فوقه و يجب تحديد خلال كم جزء من الثانية نريد أن يدور العنصر خلال نفسه و هذا الأمر نفعله بإضافة الخاصية transition للعنصر.
الآن لجعله يدور عند تمرير مؤشر الماوس فوقه دورة كاملة حول نفسه ( أي 360 درجة ) فإننا نحتاج فقط إضافة الخاصية transform: rotate(360deg); له فقط في حالة الـ :hover.
كود تدوير العنصر عند تمرير الماوس عليه
في البداية سنقسم التصميم إلى ملفين حتى يكون الشرح واضح و سهل الفهم:
- الملف
index.htmlسيحتوي على مكونات الصفحة. - الملف
style.cssسيحتوي على كود التصميم
للحصول على أيقونة يوتيوب، تيليقرام، تويتر و فيسبوك قمنا بتضمين مكتبة الأيقونات Fontawsome الإصدار 6.1.2.
الكود
/* هنا قمنا بإزالة أي هامش خارجي أو داخلي قد يضيفه المتصفح للعناصر
و كذلك قمنا بجعل الهوامش الحدود يتم حسابها كجزء من حجم العنصر */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* هذا الكلاس يجعل الأيقونات تظهر في الوسط و يضمن أن
تظل بعيدة عن جوانب الصفحة من كل الجهات بمقدار 20 بكسل */
.web-links {
text-align: center;
padding: 20px;
}
/* يتبعد web-links موضوع في الكلاس <a> هنا جعلنا أي عنصر
من اليسار و الأسفل بمقدار 5 بكسل حتى لا يظهروا بشكل متلاصق
كذلك جعلنا المؤثرات التي سنضيفها عليهم تتنفذ خلال 0.3 ثانية */
.web-links a {
text-decoration: none;
margin-left: 5px;
margin-bottom: 5px;
display: inline-block;
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/* هنا جعلنا العنصر يدور دورة كاملة حول نفسه عند تمرير
مؤشر الماوس فوقه و هذه العملية ستتنفذ خلال 0.3 ثانية */
.web-links a:hover {
transform: rotate(360deg);
}
/* هنا جعلنا الأيقونات بيضاء و خلفيتها رمادية و تظهر بشكل دائري
و كذلك حددنا طولها و عرضها بمقدار 38 بيكسل لتأخذ حجم مربع
و من ثم جعلنا حدودها منحنية بنسبة 50% لتظهر بشكل دائري */
.web-links a i {
background: #2f2f2f;
height: 38px;
line-height: 38px;
width: 38px;
border-radius: 50%;
color: #fff;
text-align: center;
font-size: 17px;
box-shadow: 0 0 1px #555 inset;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- الأيقونات المستخدمة-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- ملف التصميم -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="web-links">
<a target="_blank" href="https://twitter.com/harmashcom">
<i class="fab fa-twitter"></i>
</a>
<a target="_blank" href="https://www.facebook.com/harmashcom">
<i class="fab fa-facebook-f"></i>
</a>
<a target="_blank" href="https://www.youtube.com/c/harmashcom">
<i class="fab fa-youtube"></i>
</a>
<a target="_blank" href="https://telegram.me/harmashcom">
<i class="fab fa-telegram-plane"></i>
</a>
</div>
</body>
</html>
تجربة الكود
الكاتب
تعليقات
أضف تعليق
تقييم المقال
روابط مهمة
حقوق النشر
جميع الحقوق محفوظة لموقع هرمش. لا يسمح باستخدام الشروحات لأغراض تجارية، إجراء تعديل عليها، نشرها في موقع آخر، وضع الشروحات في تطبيق أو في كتاب إلا في حال أخذ موافقة صريحة من إدارة الموقع كما أن المحتوى مسجل بواسطة DMCA و في حال قيامك بمخالفة حقوق النشر سنضطر آسفين لاتخاذ الإجراءات اللازمة.
