منتدى دعم PBBoard الرسمي
(نسخة قابلة للطباعة من الموضوع)
https://pbboard.info/forums/t10389
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

غير طريقه عرض الصور بالمنتدى كود CSS3 لإضافة حركه رائعه على جميع صور المنتدى
titostar2010 09-08-2012 01:44 مساءً
[CSS3] » كود CSS3 لإضافة حركه رائعه على جميع صور المنتدى


اليوم معي كود CSS3 خفيف للإضافة حركه جميله على جميع صور المنتدى
لكن للأسف ما فيه مثال !!


طريقة عمل الكود : الكود يقوم بتدوير الصورة وعمل ظل لها بمرور الماوس بشكل
تدريجي ، وعند إبعاد الماوس أيضا تدور الصوره بعكس الاتجاه ويزول الظل بشكل تدرجي .


الكود وطريقة تركيبه :
ضيف هذا الكود اخر ملف css من لوحة الاداره
الكووووود
CODE

img{-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
}  



او

وهناك كود اخر
طريقة عمل الكود : الكود يقوم بعمل دوران على حدود الصور عمل ظل لها بمرور الماوس بشكل
تدريجي ، وعند إبعاد الماوس أيضا يزول الظل بشكل تدرجي


الكود

CODE

img{
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -khtml-border-radius: 3px;
    border-radius: 18px;
}

img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
} 



منتديات كاتز عرب كل جديد فى جديد
منتدى دعم PBBoard الرسمي

Copyright © 2009-2024 PBBoard® Solutions. All Rights Reserved