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

موقع جنتل الاردن هو عبارة عن فكرة بسيطة جدا مواضيع نطرحها نؤلف نترجم ونقتبس كل ذلك سبيلا في خدمة القارئ العربي
 
الرئيسيةس .و .جمكتبة الصوربحـثالتسجيلدخول

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

الموضوع السابق الموضوع التاليمركز رفع الصور
Posted By




انشرالموضوع
الرد عن طريق الفيس بوك
الابلاغ عن الموضوع




مواقع صديقة
All Tricks And Tips
Entertainment
أضف موقعك هنا
أضف موقعك هنا


صفحات فيسبوكية رائعة
All Tricks And Tips
Entertainment
المحاسبين
موقع جنتل الاردن
أضف صفحتك هنا
أضف صفحتك هنا


صفحتنا الرسمية على الفيس بوك

صفحتنا الرسمية على تويتر



الأحد أغسطس 04, 2013 3:13 am ساندنا على الفيس بوك  ساندنا على اليوتيوب ساندنا على تويـــــــتر








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


الكود لا يحتوي جافا نهائيا فقط 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 -->





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



http://i38.servimg.com/u/f38/14/82/58/44/210.jpg

http://i38.servimg.com/u/f38/14/82/58/44/1110.jpg

http://i38.servimg.com/u/f38/14/82/58/44/3333110.jpg











جميع المواضيع و الردود تعبر عن رأي صاحبها ولا تعبر عن رأي إداره موقع جنتل الاردن بــتــاتــآ
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

الموضوع السابق الموضوع التالي
صفحة 1 من اصل 1








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