×
انتشار ۱۹ اردیبهشت ماه ۱۳۹۶

طراحی افکت تصاویر با CSS

برای شما بارها پیش اومده که وارد وب سایتی بشین و محو افکت هایی که بر روی تصاویر و ایکون ها آن وجودداره بشید، ما در این اموزش مقدماتی قصد داریم بدون استفاده از jquery و تنها با استفاده از CSS یکی از این موارد را برای شما پیاده سازی کنیم و در انتهاها فایل های آن را برای دانلود در اختیار شما می گذاریم.

در ابتدا امر کد های زیر را در فایلی به نام style.css ذخیره نمایید.

برای اینکه بتونید سرعت اجرای افکت رو تغییر بدین می تونید این قسمت از کد را ویرایش نمایید

برای اینکه در لود اولیه سایت همیشه یک هاور افکت انتخاب شده داشته باشیم می توانیم حرکت هاور موس را با کد jquery زیر شبیه سازی کنیم برای این منظور کد زیر را در فایلی به نام index.js دخیره می کنیم

و در انتها کد های بالا را در سند HTML خود لود نمایید

امیدواریم از این آموزش لذت ببرید و بتونید با تغییر در اون ایده های متعددی را از اون پیاده سازی کنید.

 

ارسال نظر