بلدي : Jordan تاريخ التسجيل : 01/01/1970
| موضوع: كود css + html يعمل لك قائمة من الصور تتحرك بشكل ولا أروع .... حصريا الأحد أغسطس 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 -->
قم بتغيير الروابط الاتية الى روابط الصور التي تريدها
| |
|