[CSS3] » كود CSS3 لإضافة حركه رائعه على جميع صور المنتدى
اليوم معي كود CSS3 خفيف للإضافة حركه جميله على جميع صور المنتدى
لكن للأسف ما فيه مثال !!
طريقة عمل الكود : الكود يقوم بتدوير الصورة وعمل ظل لها بمرور الماوس بشكل
تدريجي ، وعند إبعاد الماوس أيضا تدور الصوره بعكس الاتجاه ويزول الظل بشكل تدرجي .
الكود وطريقة تركيبه :
ضيف هذا الكود اخر ملف css من لوحة الاداره
الكووووود
او
وهناك كود اخر
طريقة عمل الكود : الكود يقوم بعمل دوران على حدود الصور عمل ظل لها بمرور الماوس بشكل
تدريجي ، وعند إبعاد الماوس أيضا يزول الظل بشكل تدرجي
الكود
منتديات كاتز عرب كل جديد فى جديد
اليوم معي كود 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;
}
منتديات كاتز عرب كل جديد فى جديد