إضافة تأثير العومان إلى لوجو مدونة بلوجر رهيب جدا
السلام عليكم و رحمة الله تعالى و بركاته .
اليوم سأقدم لكم إضافة جميلة جدا و هي إضافة تأثير العومان إلى لوجو مدونتكم بلوجر ، بحيث كل ما يمر الزائر بالفأرة على اللوجو سيتحرك و هذا ما يدل على إحترافية التصميم و يزيد في جمال الموقع .
اليوم سأقدم لكم إضافة جميلة جدا و هي إضافة تأثير العومان إلى لوجو مدونتكم بلوجر ، بحيث كل ما يمر الزائر بالفأرة على اللوجو سيتحرك و هذا ما يدل على إحترافية التصميم و يزيد في جمال الموقع .
طريقة التركيب :
- إذهب الى تحرير القالب HTML ، ثم إضغط Ctrl+f من لوحة المفاتيح و إبحث عن وسم ]]></b:skin>
- بعد أن تجد الوسم ، ضع الكود التالي قبله (فوقه) مباشرة :
#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)} }
ليست هناك تعليقات:
إرسال تعليق