برای مشاهده‌ی ویدیو لطفاً آن را خریداری کنید.

سرفصل ها

بخش 1 : طراحی دکمه‌ با افکت جابه‌جایی دو لایه‌ای
00:00:06
Reply Icon

یادداشتی وجود ندارد.

منابع و متریال آموزشی

ندارد.

Video Player is loading.
cvt-20-22 - creative two layers swapping button effect.mp4

طراحی دکمه‌ با افکت جابه‌جایی دو لایه‌ای

Creative Two Layers Swapping Button Effect

دوره: طراحی صد پروژه‌ی انیمیشن و افکت‌ حرکتی با CSS

در این قسمت از دوره‌ی آموزشی، لینکی را در صفحه ایجاد می‌کنیم که با رفتن موس بر روی آن، افکت شناوری رخ بدهد. این افکت بدین شکل است که با رفتن موس بر روی لینک، در این قسمت با استفاده ازشبه‌عنصرهای before و after، افکت شناوری را درست می‌کنیم که در آن، یکی از شبه‌عنصرها جای شبه‌عنصر دیگر را می‌گیرد.یک پس‌زمینه جابه‌جا شده و جای خود را به پس زمینه‌ی دیگری می‌دهد. برای ساخت این پس‌زمینه‌ها ازشبه‌عنصرهای before و after، استفاده می‌کنیم و در نهایت با تابع translate، انتقال شبه‌عنصرها را به نحوی انجام می‌دهیم که افکت مدنظر شکل بگیرد.

level icon سطح : مقدماتی تا متوسطه
typeIcon نوع : با زیرنویس