اضافة تأثير يجعل شعار مدونتك يتحرك عند تمرير الماوس إليها

السلام عليكم ورحمة الله تعالى وبركاته على مدونة المحترف إسماعيل للمعلوميات في موضوع جديد حول اضافة اضافة تأثير يجعل شعار مدونتك يتحرك عند تمرير الماوس إليها وهذه الإضافة أرى الكثير من الأشخاص يبحثون عنها لذى قررت أن أضع لكم الدرس لن أطيل عليكم الكلام وسنمر مباشرة إلى طريقة التركيب.
ملاحظة:
التأثير يعمل على عنوان المدونة سواء كان صورة أو نص.
للمعاينة:
إذا كنت تبحث على معاينة التأثير فقط يجب عليك تمرير سهم الفأرة لشعار المدونة بالأعلى.

طريقة التركيب:

1. اذهب إلى لوحة التحكم ثم تحرير Html.
2. قم بالبحث بإستعمال CTRL+F عن الوسم ]]></b:skin> 
3. ثم ضع هذه الأكواد فوقها مباشرة.

#header h1 a:hover{
/*animation*/
-webkit-animation:jelly .5s;
   -moz-animation:jelly .5s;
    -ms-animation:jelly .5s;
     -o-animation:jelly .5s;
        animation:jelly .5s;
}
#header img:hover{
/*animation*/
-webkit-animation:jelly .5s;
   -moz-animation:jelly .5s;
    -ms-animation:jelly .5s;
     -o-animation:jelly .5s;
        animation:jelly .5s;
}
@-webkit-keyframes jelly{
from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}
}
@keyframes jelly{
from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}  }

1. ثم قم بحفظ العمل
2. ومبروك عليك الإضافة.

• وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع.
• هل أعجبتكم؟ إذا كان الجواب نعم يرجى المشاركة لإضافة المزيد من هذه المواضيع .