رأيك يهمنا

تغير اللغة

المتابعون

اخر المواضيع

تبادل اعلاني

للتصفح الافضل

اخر التعليقات

يتم التشغيل بواسطة Blogger.

تابعنا على الفيسبوك

facebook

الـموضــوعـات الأكـثـر زيـارة

الاثنين، 23 سبتمبر 2013

أهتزاز الصورة بأستخدام الـ CSS3 رأئع

شاهد:

أهتزاز الصورة بأستخدام الـ CSS3 رأئع

أهتزاز الصورة بأستخدام الـ CSS3

بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف الانبياء والمرسلين سيدنا محمد عليه وعى اله افضل الصلاة والتسليم
السلام عليكم ورحمة الله وبركاته .
اليوم معنا [ تأثير ] يجعل الصورة تهتز سواءَ كانت في المدونة او في اي موقع آخر فهذه الطريقة غير خاصة ببلوجر وهي تناسب جميع المواقع لأنها مصنوعه فقط من الـ CSS3 >> لغتي المحبوبه .
ملاحظة : افضل طريقة لأستخدام التأثير هي في الهوفر hover .




الطريقه تتكون من خطوتين :

الخطوة الأولى : زرع كود خاص في اكواد الـ CSS للقالب :

  • ندخل المدونة 
  • ثم نتجه الى القالب . 
  • نحرر القالب . 
  • نبحث عن  <![CDATA[ 
  • مباشرة اسفلها ضع الكود التالي : 
/* this is 7loll.blogspot.com */
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }}
/* this is 7loll.blogspot.com */

الخطوة الثانيه : وهي وضع هوفر للصورة وأعطائها الصفات التاليه : 

-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

الأن أذهب الى الصورة وشاهد الأهتزاز .

===

تطبيق الطريقة  على لوجو المدونة : 

     في اغلب الأحيان يكون الأي دي لصورة اللوجو Logo على هذا الشكل #header-inner img
     يجب عليك معرفة الأي دي او التأكد منه في مدونتك .
     على العموم سنضع له هوفر ليصبح هكذا : #header-inner img:hover
     ثم بعد ذالك سنضع له الصفات في الخطة الثانيه .

 هذه هي الطريقة بكل بساطه ومن لديه سؤال فأنا هنا ~

0 التعليقات:

إرسال تعليق

صفحات

قسم بلوجر

مدونات صديقة

المتواجدين الان

Web Design Blogs
Ping your blog, website, or RSS feed for Free a7trafy.blogspot.com Real PR

اعلانات