ساخت قورباغه انیمیشنی متحرک

اگر دوستدارید لوگوی وبسایتتون فانتزی تر بشه و از حالت رسمی و خشک بودن در بیاد این نوشته رو بخونید.
جدیداً مُد شده توی طراحی وبسایت ها کاری میکنن که لوگو یه جورایی به چشم بیاد. بهش رفلکس نور اضافه می کنن، کاری می کنن که لوگو دائماً حرکت کنه و از اینجور کارا… که خب اینها باعث میشه مخاطب به لوگوی سایت فکر کنه و درنتیجه اون رو به خاطر بسپاره.
شما هم می تونید تنها با کدهای Html5 و Css3 لوگویی شبیه این قورباغه دوستداشتنی بسازید. قورباغه ای که پلک میزنه و وقتی بهش نزدیک میشیم، می پره! یه چیز خلاقانه که پتانسیل ماندگاری در ذهن رو داره.

طرح‌واره

خیلی خب! اول المان های صورت رو با Html طراحی می کنیم:

اینجا برای طراحی صورت قورباغه از تگ Div استفاده کردیم که شما می تونید از هر تگ دیگه ای که دوست دارید استفاده کنید.

سبک

تا اینجا چیزی برای نمایش وجود نداره. مهمترین مسئله توی این طراحی استایلش هست. الان باید ابعاد، رنگ های پس زمینه، حاشیه ها و موقعیت ها رو تنظیم کنیم. شما می تونید استایل رو به صورت جداگانه توی فایل دیگه گذاشته و به صفحه متصل کنید یا توی همون صفحه با استفاده از تگ Style قرارش بدید.

برای ساخت انیمیشن پلک زدن، از دو قانون Keyframe استفاده کردیم.

مشاهده‌ی پیشنمایش انیمیشن

طراحی انیمیشن برای وبسایت خیلی آسونه. نه نیازی به کانواس و نه جی کوئری هست. تنها کافیه از Css3 استفاده کنیم!
در آینده با انیمیشن های جدیدتر و خلاقانه تری خدمتتون می رسیم، پس منتظر باشید.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK