%45 تخفیف، با کد Tabestan روی تمام آموزش ها، بمناسبت جشنواره تابستانه بیاموز ...!
زمان باقی مانده (آخرین فرصت ها)
سبد (0)

تبلیغات

انیمیشن واکنشگرا

کلاس های انیمیشن W3.CSS

W3.CSS کلاس های زیر برای انیمیشن مهیا شده است.

کلاس تعریف
w3-animate-top  حرکت کشویی یک عنصر از بالا  (300px-  تا 0)
w3-animate-bottom حرکت کشویی  یک عنصر از پایین(0 تا 300px-)
w3-animate-left حرکت کشویی  یک عنصر از چپ(0 تا 300px-)
w3-animate-right حرکت کشویی  یک عنصر از راست(0 تا 300px-)
w3-animate-opacity وضوح یک عنصر از 0 تا 1.5 ثانیه تغییر میدهد.
w3-animate-zoom اندازه یک عنصر را از 0 تا 100% تغییر میدهد.
w3-animate-fading وضوح عنصررا  از0 تا 1 و از 1 تا0 تغییر میدهد(fades in + fade out)
w3-spin چرخش عناصر به اندازه360 درجه

متحرک سازی از بالا

کلاس  w3-animate-top یک عنصر را از بالا به صورت کشویی می آورد.(از300px- تا 0 )

مثال

<div class="w3-container">
  <h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
خودتان امتحان کنيد »

متحرک سازی از پایین

کلاس  w3-animate-bottom یک عنصر را از پایین به صورت کشویی می آورد.(از300px- تا 0 )

مثال

<div class="w3-container">
  <h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
خودتان امتحان کنيد »

متحرک سازی از چپ

کلاس  w3-animate-left یک عنصر را از چپ به صورت کشویی می آورد.(از300px- تا 0 )

مثال

<div class="w3-container">
  <h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
خودتان امتحان کنيد »

متحرک سازی از راست

کلاس  w3-animate-right یک عنصر را از راست به صورت کشویی می آورد.(از300px- تا 0 )

مثال

<div class="w3-container">
  <h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
خودتان امتحان کنيد »

محو کردن عناصر

کلاس  w3-animate-opacity وضوح یک تصویر را از 0 به 1 در مدت زمان 0.8 ثانیه تغییرمیدهد.

کلاس w3-animate-opacity یک عنصر را محو میکند:

مثال

<div class="w3-animate-opacity">..</div>
خودتان امتحان کنيد »

بزرگنمایی عناصر

کلاس w3-animate-zoom یک عنصر را از 0 تا 100%  از نظر اندازه تغییر میدهد.

کلاس w3-animate-zoom یک عنصر را بزرگنمایی میکند:

مثال

<div class="w3-animate-zoom">..</div>
خودتان امتحان کنيد »

چرخش عناصر

کلاس w3-spin  یک عنصر را به اندازه 360 درجه می چرخاند:

مثال

<div class="w3-spin">..</div>
خودتان امتحان کنيد »

محو شدن بی نهایت

کلاس w3-animate-fading یک عنصررا در هر 10 ثانیه (به صورت پیوسته) محو می کندو نمایش می دهد:

متحرک سازی به صورت محو شدن و پدیدار شدن

مثال

<div class="w3-animate-fading">..</div>
خودتان امتحان کنيد »

محو کردن همه

مثال

<img class="w3-animate-top" src="/img_01.jpg">
<img class="w3-animate-zoom" src="/img_02.jpg">
<img class="w3-animate-left" src="/img_03.jpg">
<img class="w3-animate-bottom" src="/img_04.jpg">
خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی