بروز رسانی بهمن ۱ام, ۱۳۹۹ ۳:۳۴ بعد از ظهر
فروردین ۲۴, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
در آن مطلب نیت و اراده ساخت افکتی جهت زمانی که متنی را hover می کنیم, داریم. قبل از هر چیز مفاهیم زیر را به عنوان پیشنیاز معرفی می کنیم:
See the Pen Fun hover effect by Mojtaba Seyedi (@seyedi) on CodePen.
اول از همه با بهره بری و استفاده از گرادینت خطی به حالت زیر می رسیم:
a
background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%);
حال کافی می باشد که با دو برابر کردن مقدار و اندازه background-size باعث شویم تا تنها و فقط یک رنگ از دو رنگ دیده می شود:
a
background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%);
background-size: 200%; /* دو برابر کردن مقدار و اندازه پس باره */
سپس مکان پس باره را با بهره بری و استفاده از ویژگی background-position در زمان hover به مقدار و اندازه ۱۰۰ قسمت و بخش پس باره جابه جا می کنیم تا به پس نتیجه آن می شود که دلخواه برسیم.
a
background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%);
background-size: 200%; /* دو برابر کردن مقدار و اندازه پس باره */
background-position: 0;
a:hover
background-position: 100%;
تصویر زیر یک شبیه سازی جهت درک بهتر از اتفاقی که می افتد, می باشد:
و همچنین در مرحله آخر با بهره بری و استفاده از ترنزیشن به پس نتیجه آن می شود که دلخواه می رسیم:
a
background-image: linear-gradient(to left, #25B0A9 50%, #FF5722 50%);
background-size: 200%; /* دو برابر کردن مقدار و اندازه پس باره */
background-position: 0;
transition: background 0.4s;
a:hover
background-position: 100%;
در صورتی که بخواهیم که متن در حالت عادی, رنگی در پس باره نداشته باشد و همچنین تنها و فقط در زمانی که نشانه گر روی آن هم قرار می گیرد رنگ, در زیر آن هم حرکت کند کافی می باشد که نصف گرادینت را شیشه ای کنیم:
background-image: linear-gradient(to left, #25B0A9 50%, transparent 50%);
و همچنین آنکه در صورتی که دنبال آن هستید که بصورت دو زبانه (دو جهته) از آن تکنیک بهره بری و استفاده کنید, دموی زیر را بررسی کردن کنید:
See the Pen bi-direction hover effect by Mojtaba Seyedi (@seyedi) on CodePen.
افکت ما هم آماده می باشد,
شاد باشید…
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0