ساخت انیمیشن (Animation) به صورت ظاهر شدن عنصر به همراه بزرگ شدن (انیمیشن Zoom in)، با کلاس w3-animate-zoom ، در W3.CSS

با استفاده از کلاس w3-animate-zoom در چارچوب W3.CSS ، می توانیم یک انیمیشن (Animation) به صورت ظاهر شدن عنصر به همراه بزرگ شدن (انیمیشن Zoom in) بسازیم.

به این صورت که عنصر از اندازه تقریبا برابر 0 درصد اندازه واقعی خود، همین طور بزرگ می شود تا اینکه به اندازه واقعی خود برسد. بنابراین ظاهر شدن عنصر، در واقع همان تغییر اندازه آن از 0 درصد تا 100 درصد اندازه واقعی خود می باشد.

کلاس w3-animate-zoom را باید به صورت زیر برای عنصر مورد نظر ذکر نماییم :

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

این صفحه را دوباره اجرا کنید تا چگونگی نمایش انیمیشن (Animation) در ابتدای بارگذاری صفحه را مشاهده نمایید :

خطا - صفحه را دوباره بارگذاری کنید
منابع و لینک های مفید
نویسنده علیرضا گلمکانی
شماره کلید 26297
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

کلید
×

شماره کلید


دسته بندی
×

شماره دسته کلید


جستجو
×

جستجو