السلام عليكم و رحمة الله تعالى و بركاته
اليوم سأقدم لكم إضافة جميلة جدا و هي إضافة تأثير العومان إلى لوجو مدونتكم بلوجر ، بحيث كل ما يمر الزائر بالفأرة على اللوجو سيتحرك و هذا ما يدل على إحترافية التصميم و يزيد في جمال الموقع
اليوم سأقدم لكم إضافة جميلة جدا و هي إضافة تأثير العومان إلى لوجو مدونتكم بلوجر ، بحيث كل ما يمر الزائر بالفأرة على اللوجو سيتحرك و هذا ما يدل على إحترافية التصميم و يزيد في جمال الموقع
- إذهب الى تحرير القالب 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)} }
/*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)} }
Enregistrer un commentaire