موقع جنتل الاردن

تم نقل الموقع



الموقع الجديد هنــــــاااااااا
☞ أغلق النافذة
كود css + html يعمل لك قائمة من الصور تتحرك بشكل ولا أروع .... حصريا

http://1-media.net
 
الرئيسيةأحدث الصورالتسجيلدخول


 

 كود css + html يعمل لك قائمة من الصور تتحرك بشكل ولا أروع .... حصريا

اذهب الى الأسفل 
كاتب الموضوعرسالة


avatar


بلدي : Jordan
تاريخ التسجيل : 01/01/1970

كود css + html يعمل لك قائمة من الصور تتحرك بشكل ولا أروع .... حصريا  Empty
مُساهمةموضوع: كود css + html يعمل لك قائمة من الصور تتحرك بشكل ولا أروع .... حصريا    كود css + html يعمل لك قائمة من الصور تتحرك بشكل ولا أروع .... حصريا  Emptyالأحد أغسطس 04, 2013 3:13 am



اليوم نقدم لكم هذا الكود الرائع الذي يقوم بتحريك الصور بطريقة رائعة 

كود css + html يعمل لك قائمة من الصور تتحرك بشكل ولا أروع .... حصريا  444412

الكود لا يحتوي جافا نهائيا فقط CSS و HTML




قم بتغيير الروابط التالية الموجودة في الكود السابق بروابط الصور التي تريدها وحاول ان تكون نفس الحجم لكي يبقى المنظر مناسب



الكود:

<!-- Algantel.com -->

<img class="swing" src="http://i38.servimg.com/u/f38/14/82/58/44/1110.jpg" />


<img class="swing" src="http://i38.servimg.com/u/f38/14/82/58/44/3333110.jpg" style="
 animation-delay: 0.8s;
 -webkit-animation-delay: 0.8s;
 -moz-animation-delay: 0.8s;
 animation-delay: 0.8s;
 "
/>


<img class="swing" src="http://i38.servimg.com/u/f38/14/82/58/44/210.jpg" style="
 animation-delay: 0.5s;
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 animation-delay: 0.5s;
 "
/>
<!-- Algantel.com -->

<style>

.swing{
 -webkit-animation:swinging 10s ease-in-out 0s infinite;
 -moz-animation:swinging 10s ease-in-out 0s infinite;
 animation:swinging 10s ease-in-out 0s infinite;
 -webkit-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 transform-origin:50% 0;
}

@-webkit-keyframes swinging{
 0% { -webkit-transform: rotate(0); }
 5% { -webkit-transform: rotate(10deg); }
 10% { -webkit-transform: rotate(-9deg); }
 15% { -webkit-transform: rotate(8deg); }
 20% { -webkit-transform: rotate(-7deg); }
 25% { -webkit-transform: rotate(6deg); }
 30% { -webkit-transform: rotate(-5deg); }
 35% { -webkit-transform: rotate(4deg); }
 40% { -webkit-transform: rotate(-3deg); }
 45% { -webkit-transform: rotate(2deg); }
 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
 0% { -moz-transform: rotate(0); }
 5% { -moz-transform: rotate(10deg); }
 10% { -moz-transform: rotate(-9deg); }
 15% { -moz-transform: rotate(8deg); }
 20% { -moz-transform: rotate(-7deg); }
 25% { -moz-transform: rotate(6deg); }
 30% { -moz-transform: rotate(-5deg); }
 35% { -moz-transform: rotate(4deg); }
 40% { -moz-transform: rotate(-3deg); }
 45% { -moz-transform: rotate(2deg); }
 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
 0% { transform: rotate(0); }
 5% { transform: rotate(10deg); }
 10% { transform: rotate(-9deg); }
 15% { transform: rotate(8deg); }
 20% { transform: rotate(-7deg); }
 25% { transform: rotate(6deg); }
 30% { transform: rotate(-5deg); }
 35% { transform: rotate(4deg); }
 40% { transform: rotate(-3deg); }
 45% { transform: rotate(2deg); }
 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { transform: rotate(0); }
}

</style>

<!-- Algantel.com -->





قم بتغيير الروابط الاتية الى روابط الصور التي تريدها 






الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
كود css + html يعمل لك قائمة من الصور تتحرك بشكل ولا أروع .... حصريا
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» قائمة أفقية جذابة باللون الاخضر والاسود مع حركة انيقة وفقط بإستخدام css+html بدون جافا يمكنك استخدامها لاقسام منتداك او موقعك
» شريط تصفح قائمة منسدلة ومتعددة فقط " html+Css " بدون جافا
» كود css+html لعمل تأثير zoom على الصور ,, جميل جدا
» احصل على الاف اللايكات من خلال هذا الكود لصفحات ال html رائع يظهر للزائر ليعمل لايك على صفحتك على الفيس بوك مع تأثبر JQuery ويظهر له كل مرة حتى يعمل لايك للصفحة
» أحصل على ايقونات التواصل الاجتماعي بشكل جديد ورائع وبدوران انيق عند المرور عليها حصريا

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
موقع جنتل الاردن ... Algantel Of Jordan  :: القسم التقني للمواقع والمنتديات ::   :: القوالب والاستايلات والاضافات المجانية للمواقع والمدونات والمنتديات-
انتقل الى:  






جميع الحقوق محفوظة لبوابة جنتل الاردن © 2013