راهنمایی در مورد حالت انیمیشن

این تاپیک 3 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  امین ،‏ 1 سال و 2 ماه پیش .

این تاپیک تاکنون 274 بازدید داشته است .

نویسنده پست
شنبه ، 3 اکتبر 2015     7:28 ق.ظ #


Toghrol Rc

Subscriber
2 پست2 تاپیک

سلام دوستان و خسته نباشید!
در آدرس “http://www.aparat.com/talent94″ در قسمت پایین پایین (فوتر) ، آیکون شبکه های اجتماعی به صورت خیلی زیبا وقتی هاور میشن رنگی میشن. من هرکاری کردم نتونستم کدش رو از توی Inspect Elements هم پیدا کنم.
حالا سوالی که داشتم اینه:
1- این حالتی که انگار دکمه ها با یک رنگ پُر میشن،فقط با Html و css نوشته شده یا زبان دیگه هم درگیر هست؟
2- منطق انجامش به چه صورت هست؟ یعنی یک باکس رنگ از پایین به بالا میاد و یا واقعا اون باکس خاکستری رنگ،از پایین به بالا با رنگ پُر میشه؟
3- اگر امکانش هست لطفا کدش رو قرار بدید خودم روش یکمی کار کنم شاید فهمیدم. چون واقعا نتونستم کدش رو پیدا کنم.
تشکر از شما

0  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
شنبه ، 3 اکتبر 2015     10:20 ق.ظ #


میوند بارکزی

Subscriber
118 پست3 تاپیک

سلام دوست عزیز

نه فقط با html و css است طوری که در صورت عادی یه عکس(عکس سیاه و سفید)و در صورت هاور عکس دیگه ای(عکس رنگه) نمایش داده بشه.

البته عکس ها رو باید از طریق css لود کنید

اگه به html و css بلد نیستین بگید تا براتون کدش رو بزارم

ممنون.

1  تشکر
شنبه ، 3 اکتبر 2015     10:25 ق.ظ #


میوند بارکزی

Subscriber
118 پست3 تاپیک

اهان دوست عزیز ببخشین لینک رو ندیدم

برای این مورد پلاگین های زیادی هست مثلا این .

موفق باشید دوست عزیز

1  تشکر
شنبه ، 3 اکتبر 2015     10:48 ق.ظ # پاسخ تائید شده توسط سوال کننده


امین

Subscriber
19 پست0 تاپیک

سلام

این افکت با css3 ایجاد شده و ویژگی به نام transform - scale هستش که با  :before و :after استفاده شده برای یادگیری میتونید از لینک زیر استفاده کنید :

http://www.w3schools.com/cssref/css3_pr_transform.asp

اینم نمونه کدش رو میتونید در اینجا ببینید :

http://callmenick.com/_development/icons-css3-transitions/index3.html

که سورسش در اینجاست

http://callmenick.com/post/nicer-icon-hover-effects-with-css3-transitions

1  تشکر
پست 1 تا 4 (از مجموع 4 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .