پکگراند (پس زمینه) انیمیشنی برای وبلاگ ها
- دوشنبه, ۱۷ تیر ۱۳۹۸، ۰۷:۳۳ ب.ظ
کد CSS زیبا برای پسزمینه دکمه ها و ...
نمونه ها در وبلاگ های
خب برای اینکار باید یه کمی زبان html , css بلد باشید
ابتدا این دو کد رو به بخش Css قالب خود اضافه کنید - لینک
کد اول :
#bganime-top-byfazelunity{
box-shadow : 0 2px 0 0 #CC2890 inset; transition: all 0.3s ease;
}
#bganime-top-byfazelunity:hover{
box-shadow : 0 400px 0 0 #CC2890 inset; transition: all 0.3s ease;
}
#bganime-left-byfazelunity{
box-shadow : 2px 0 0 0 #CC2890 inset; transition: all 0.3s ease;
}
#bganime-left-byfazelunity:hover{
box-shadow : 400px 0 0 0 #CC2890 inset; transition: all 0.3s ease;
}
#bganime-right-byfazelunity{
box-shadow : -2px 0 0 0 #CC2890 inset; transition: all 0.3s ease;
}
#bganime-right-byfazelunity:hover{
box-shadow : -400px 0 0 0 #CC2890 inset; transition: all 0.3s ease;
}
#bganime-bottom-byfazelunity{
box-shadow : 0 -2px 0 0 #CC2890 inset; transition: all 0.3s ease;
}
#bganime-bottom-byfazelunity:hover{
box-shadow : 0 -400px 0 0 #CC2890 inset; transition: all 0.3s ease;
}
کد دوم :
@keyframes bganime-anim-byfazelunity
{
0%{
box-shadow :200px 0 0 0 #BB3CFF inset;
transition: all 1s ease;
border-radius: 99px;
}
25%{
box-shadow :-200px 0 0 0 #F5005E inset ;
transition: all 1s ease;
border-radius: 99px;
}
50% {
box-shadow:200px 0 0 0 #29D183 inset;
transition: all 1s ease;
border-radius: 99px;
}
75%{
box-shadow :-200px 0 0 0 #00AAFF inset;
transition: all 1s;
border-radius: 99px;
}
100%{
box-shadow : 200px 0 0 0 #FF700A inset;
transition: all 1s ease;
border-radius: 99px;
}
}
حالا نحوه استفادهبرای استفاده در دکمه (دنبال کنید) این کد رو به css وبلاگتون اضافه کنید
کد:
.followthis{
animation:bganime-anim-byfazelunity 4s infinite;
}
این ترفند ممکن است برای برخی از قالب های بیان عمل نکند
برای عمل کردن باید css رو بصورت حرفه ای بلد باشید
راهنما برای افراد حرفه ای :)
شما باید در بخش ساختاری بجای تگ
<head:style></head:style>
لینک های مورد نیاز خود را قرار بدید برای فهمیدن وبلاگ خود را بالا بیاورید و با کلید f12 یا Ctrl + shift +i
و یا با راست کلیک Inscept Element لینک های فایل های css خود را کپی کنید و به جای همین تگ بزنین
حالا شما باید فایل sharedrtl.css خود را دانلود کنید
و اونو باز کنید و در کلاس followthis این کد ها رو وارد کنید
animation:bganime-anim-byfazelunity 4s infinite;
و
@keyframes bganime-anim-byfazelunity
{
0%{
box-shadow :200px 0 0 0 #BB3CFF inset;
transition: all 1s ease;
border-radius: 99px;
}
25%{
box-shadow :-200px 0 0 0 #F5005E inset ;
transition: all 1s ease;
border-radius: 99px;
}
50% {
box-shadow:200px 0 0 0 #29D183 inset;
transition: all 1s ease;
border-radius: 99px;
}
75%{
box-shadow :-200px 0 0 0 #00AAFF inset;
transition: all 1s;
border-radius: 99px;
}
100%{
box-shadow : 200px 0 0 0 #FF700A inset;
transition: all 1s ease;
border-radius: 99px;
}
}
و فایل رو ذخیره کنید و توی صندوق بیان اپلود کنید
و لینک دانلودش رو به جای لینک فایل sharedrtl.css قرار بدید
اگر هم CSS رو بلد نیستید متاسفانه باید منو توی وبلاگتون نویسنده کنید
تا براتون درستش کنم :|
نام کاربری : fazelunity0054
نویسنده کردید خبر بدید
برای استفاده کردن در دیگر جاها باید کد دکمه یا ... توی بخش ویرایش ساختاری پیدا کنید و این کد رو بهش
اضافه کنید
style="animation:bganime-anim-byfazelunity 4s infinite;"
به این صورت :
<div style="animation:bganime-anim-byfazelunity 4s infinite;" class="mod_left_blank">
استفاده بعدی :
نمونه استفاده در وبلاگ های
fazelunity.blog.ir - بخش وبلاگ دوستان
این یکم سخته
ادامه اموزش به زودی (SooN)
