مشاوره رایگان طراحی سایت و قالب وردپرس
۰۵۱-۳۸۸۴۶۰۲۷ ۰۹۱۲۰۲۴۸۱۱۲ ۰۹۳۶۷۹۸۸۱۱۲

آموزش css – انیمیشن و متحرک سازی اجزا با CSS

شما با استفاده از سی اس اس انیمیشن می توانید انیمیشن و متحرک سازی اجزا ی اچ تی ام ال خود را به راحتی انجام دهید.اینکار میتواند جایگزین خوبی با تصاویرانیمیشن ، فلش و جی کوئری باشد .

انیمیشن و متحرک سازی اجزا

قانون keyframes@ در CSS3

برای ایجاد انیمیشن در CSS3 شما باید قانون keyframes@ در CSS3 را یاد بگیرید.

شما در داخل keyframes@ ھا تعریف میکنید که در چه زمانی باید چه تغییراتی درون سی اس اس ھا انجام شود مثلًا در ۰% از زمان بک گراند قرمز و در ۱۰۰% زمان زرد باشد

نکته : اینترنت اکسپلورر از سی اس اس انیمیشن و keyframes@ پشتیبانی نمی کند.

فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .

کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارد .

اپرا برای این ویژگی نیاز به پیشوند -o- دارد.

در اینجا myfirst نام انیمیشن شما است.

@keyframes myfirst
{
from {
background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {
background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {
background: red;}
to {background: yellow;}
}

پس از آنکه حرکت مورد نظر را با keyframes@ تعریف کردید نوبت آن است که آن را که نامش مثلًا myfist است ، به یک div متصل کنید. برای انجام دادن آن شما باید دو کار انجام دھید :

  •  نام انیمیشن را تعریف کنید مثلًا myfirst
  • مدت زمان انیمیشن
div
{ animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */
}

 نکته : در صورتی که ھیچ زمانی داده نشود ھیچ افکتی رخ نخواھد داد چون زمان دیفالت صفر ثانیه است.

انیمیشن افکتی است که نشان دھنده تغییر حالت یک المنت به حالت دیگر است .
شما ھرچقدر که بخواھید می توانید حالت را تغییر دھید .

  • تغییرات را میتوانید به صورت درصد یا کلمه ھای کلیدی from و to بیان کنید. مانند بالا
  • ۰% ابتدای انیمیشن و ۱۰۰ % انتھای آن است . مانند کد زیر :
@keyframes myfirst
{
۰% { background: red; }
۲۵% {background: yellow;}
۵۰% {background: blue;}
۱۰۰% {background: green;}
}

 و

@keyframes myfirst
{
۰% { background: red; left:0px; top:0px; }
۲۵% { background: yellow; left:200px; top:0px; }
۵۰% { background: blue; left:200px; top:200px; }
۷۵% { background: green; left:0px; top:200px; }
۱۰۰% { background: red; left:0px; top:0px; }
}

 

اشتراک کذاری در :
سوالات متداول

توس وب تضمین میکند مطابق با مفاد قرارداد رسمی که درابتدا, متناسب با نیاز مشتری تنظیم شده عمل نماید (تحویل به موقع – پشتیبانی پس از تحویل – رعایت استاندارد های جهانی)

پشتیبانی دارای محدودیت زمانی نبوده و ما پاسخگوی تمامی مشکلات و خطاهای احتمالی سایت شما هستیم.

طراحی اختصاصی توسط تیم حرفه ای و بدون استفاده از قالب های آماده و با رعایت استانداردهای جهانی وب

تیم توس وب تلاش کرده تا تمامی موارد امنیتی که مربوط به کدنویسی قالب ها بوده را رعایت کند.

بله – پس از طراحی فایل های آموزشی به صورت متنی یا ویدئویی در اختیار شما قرار می گیرد.

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

توس وب از بروزترین تکنولوژی های مورد استفاده در وب از قبیل PHP,HTML5,CSS3,Java Script,Bootstrap استفاده می کند.

بله، قالب هایی که توسط توس وب طراحی می شوند منطبق با آخرین استانداردهای جهانی وب ( استاندارد کنسرسیوم جهانی وب = html css
استاندارد ECMA = استاندارد کدهای جاوا اسکریپت ) می باشد.

هزینه طراحی قالب وردپرس، بر اساس امکانات و نیاز های مشتری تعیین می گردد که در بخش تعرفه ها توضیح داده شده است.

پاسخ این سوال را می توان در چند جمله اینگونه بیان کرد :

پشتیبانی حرفه ای – طراحی متناسب با سلیقه و نیازهای مشتری – حجم کم کدنویسی پائین و سرعت لود بالا

با توجه به نوع وبسایت و امکانات آن بین ۲۵ تا ۶۰ روز متغیر می باشد.

چرا به توس وب اعتماد کنیم ؟

توس وب یک سایت رسمی می باشد و همچنین دارای گواهی نامه های معتبر ( نماد اعتماد الکترونیک از مرکز توسعه و تجارت الکترونیک , نماد ساماندهی از وزارت ارشاد و درگاه پرداخت ایمن بانک ملت ) می باشد

نظرات برخی مشتریات درباره توس وب