/ آموزش متحرک کردن عکس با سی اس اس (اختصاصی ویکی وی بی)
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
فروش قالب وردپرس فروش فایل مشابه ژاکت وندا هاست
نمایش نتایج: از 1 به 9 از 9

مقاله: آموزش متحرک کردن عکس با سی اس اس (اختصاصی ویکی وی بی)

    1. آموزش متحرک کردن عکس با سی اس اس (اختصاصی ویکی وی بی)

      آموزش متحرک کردن عکس با سی اس اس (اختصاصی ویکی وی بی)

      سلام خدمت تمامی کاربران عزیز
      توی این آموزش میخوایم باهم این عکس رو به صورت یک تصویر متحرک در بیاریم.
      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      (این مدل عکس ها در انجمن های بازی سازی زیاده)

      خب
      اول یک کلس ایجاد میکنیم

      کد:
      
      .WIKIVB {   }

      بعد با اچ تی ام ال اینو مینویسیم

      کد:
      <div class="WIKIVB"></div>
      خب حالا بشماریم ببینیم چندتا فریم داریم؟؟؟

      6تا
      پس میشه

      steps(6)

      و میخوایم با چه سرعتی باشه؟؟
      0.5 متوسط
      1 کند
      0.2 تند
      و میخوایم یه انیمیشن باشه و پشت سر هم تکرار بشه
      پس مینویسیم :

      کد:
       animation: WIKIVB-RUN 0.5s steps(6) infinite;
        background: url(http://upload.wikivb.ir/images/0j4yqbt6t6eztzemkuwd.png);
      مهمترین چیز اینه که
      اندازه بهش بدید

      پس 672px تقسیم بر 6 فریم
      112px
      ---
      160px
      هم که ارتفاعه تکلیفش مشخصه

      پس

      کد:
        height: 160px;
        width: 112px;
      خب تا اینجا عکس اومد حالا متحرک سازی
      برای متحرک سازی از تکنیک background-position استفاده میکنیم
      ( توی هاور ها هم background-position استفاده زیادی داره )

      و مینویسیم

      کد:
      @keyframes WIKIVB-RUN {  
      100% { background-position: -672px;}
      }
      کد نهایی سی اس اس:
      کد:
      ..WIKIVB {
        animation: WIKIVB-RUN 0.5s steps(6) infinite;
        background: url(http://upload.wikivb.ir/images/0j4yqbt6t6eztzemkuwd.png); 
        height: 160px;
        width: 112px;
      }
      
      @keyframes WIKIVB-RUN {  
      100% { background-position: -672px;}
      }

      موفق باشیدمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      - - - Updated - - -

      اگه سوالی بود در خدمتم
      ----------------------
      اینم یکی دیگه که تعداد استپ هاش میشه 10
      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      - - - Updated - - -

      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      اینم یکی دیگه ولی شمارشش با خودتونمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      ویرایش توسط C.I.A : 11-02-2013 در ساعت 04:35 PM
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

      7 نفر از اعضا پست C.I.A را پسندیده اند


  1. #2
    Mr.Javad آنلاین نیست.
    Mr.Javad
    مدير بازنشسته
    103نوشته137مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    17
    پسندیده است
    217 پست
    بلاگ
    0 پست
    میزان امتیاز
    126
    مسئول 2 ستاره
    www.toolsdl.com/forum
    خیلی جالبه
    گاهی اوقات من مشابه اش رو در قسمت ورود به ایمیل در یاهو دیدم به مناسبت های مختلف مثلا هالوین و ...

    3 نفر از اعضا پست Mr.Javad را پسندیده اند



  2. #3
    C.I.A آنلاین نیست.
    C.I.A
    کاربر سايت
    393نوشته207مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    2035
    پسندیده است
    197 پست
    بلاگ
    2 پست
    میزان امتیاز
    217
    holoo-f.ir
    نقل قول نوشته اصلی توسط Mr.Javad نمایش پست ها
    خیلی جالبه
    گاهی اوقات من مشابه اش رو در قسمت ورود به ایمیل در یاهو دیدم به مناسبت های مختلف مثلا هالوین و ...
    خب اگه میشه اسپرایت هاش رو اینجا بذارید تا بقیه استفاده کنند.مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  3. #4
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,611مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26488
    wikivb.ir
    گرافیست خوبی باشید با همین keyframe ساده میشه حرکات خیلی جالبی خلق کرد و یه استایل رو کاملا زنده جلوه داد مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    6 نفر از اعضا پست WikiVB را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #5
    Mr.Javad آنلاین نیست.
    Mr.Javad
    مدير بازنشسته
    103نوشته137مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    17
    پسندیده است
    217 پست
    بلاگ
    0 پست
    میزان امتیاز
    126
    مسئول 2 ستاره
    www.toolsdl.com/forum
    البته الان دیگه برداشته اما نمونه معمولی اش اینه :
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    ولی نمونه های مناستبی اش بسیار قشنگ هستن
    تصاوير پيوست شده تصاوير پيوست شده

    2 نفر از اعضا پست Mr.Javad را پسندیده اند



  5. #6
    C.I.A آنلاین نیست.
    C.I.A
    کاربر سايت
    393نوشته207مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    2035
    پسندیده است
    197 پست
    بلاگ
    2 پست
    میزان امتیاز
    217
    holoo-f.ir
    نقل قول نوشته اصلی توسط WikiVB نمایش پست ها
    گرافیست خوبی باشید با همین keyframe ساده میشه حرکات خیلی جالبی خلق کرد و یه استایل رو کاملا زنده جلوه داد مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    با حرف شما کاملا موافقم ولی یکمی هم دردسر داره
    چون باید اندازه هاش با هم متناسب باشه و ..
    میشه شما هم چند تا بذارید؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست C.I.A را پسندیده است:


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  6. #7
    C.I.A آنلاین نیست.
    C.I.A
    کاربر سايت
    393نوشته207مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    2035
    پسندیده است
    197 پست
    بلاگ
    2 پست
    میزان امتیاز
    217
    holoo-f.ir
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    - - - Updated - - -

    کد:
    .WIKIVB {
      animation: WIKIVB-RUN 1s steps(44) infinite;
      background: url(http://upload.wikivb.ir/images/y6rtlbxwvucmr2rnwsk1.png); 
      height: 156px;
      width: 156px;
    
    }
    
    @keyframes WIKIVB-RUN {  
    100% { background-position: 6864px;}
    }
    کد HTML:
    <div class="WIKIVB"></div>
    فایرفاکس مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست C.I.A را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  7. #8
    C.I.A آنلاین نیست.
    C.I.A
    کاربر سايت
    393نوشته207مورد پسند

    تاریخ عضویت
    Jun 2013
    شماره عضویت
    2035
    پسندیده است
    197 پست
    بلاگ
    2 پست
    میزان امتیاز
    217
    holoo-f.ir
    میتونید دمو کار رو از اینجا ببینید
    http://www.wikivb.ir/editor.html

    برای فایر فاکس کد :
    کد:
    <head>
    <style type="text/css">
    .WIKIVB {
      animation: WIKIVB-RUN 1s steps(44) infinite;
      background: url(http://upload.wikivb.ir/images/y6rtlbxwvucmr2rnwsk1.png); 
      height: 156px;
      width: 156px;
    
    }
    
    @keyframes WIKIVB-RUN {  
    100% { background-position: 6864px;}
    }
    </style>
    </head>
    <body>
    <div class="WIKIVB"></div>
    </body>
    
    </html>
    برای پسر کد :

    کد:
    <head>
    <style type="text/css">
    
    .WIKIVB {
      animation: WIKIVB-RUN 0.5s steps(6) infinite;
      background: url(http://upload.wikivb.ir/images/0j4yqbt6t6eztzemkuwd.png); 
      height: 160px;
      width: 112px;
    }
    
    @keyframes WIKIVB-RUN {  
    100% { background-position: -672px;}
    }
    
    
    
    }
    
    @keyframes WIKIVB-RUN {  
    100% { background-position: 6864px;}
    }
    </style>
    </head>
    <body>
    <div class="WIKIVB"></div>
    </body>
    
    </html>
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  8. #9
    tishin آنلاین نیست.
    tishin
    کاربر سايت
    2نوشته0مورد پسند

    تاریخ عضویت
    Jan 2015
    شماره عضویت
    7796
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    10
    No Set
    سلام
    تست کردم اما برای من انیمیشن اجرا نشد

    یه سوال
    اگر بخواایم آیتمی رو در صفحه حرکت بدیم
    مثلا ابری
    بادبادکی
    که از یه طرف صفحه بره اونطرفش و هی این تکرار بشه از چه کدی باید استفاده کنیم ؟

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی