تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 1 از 1

مقاله: اموزش اختصاصی ساخت ( لوگوی متحرک تویتر )

    1. اموزش اختصاصی ساخت ( لوگوی متحرک تویتر ) »

      اموزش اختصاصی ساخت ( لوگوی متحرک تویتر )

      نگارش: , by (کاندیدای مدیریت)
      2013/03/04 12:57 AM
      امتیاز: 

      سلام دوستان امروز با یک اموزش متفاوت درخدمتتون هستم ، امروز میخوام بهتون اموزش بدم که میشه به راحتی با استفاده از چند تا Keyframes و Transition یک انمیشن متحرک و کارامد ساخت ،خوب شروع میکنم :

      قدم اول :

      کد HTML:
      <div class="vbiran"> <div class="twitter-bird"></div></div>
      یک div تعریف کردیم و نام vbiran رو به کلاس اختصاص دادیم و یک div دیگه ( div متداخل ) در دل div اولی تعریف کردیم و نام کلاس اون رو twitter-brid قرار دادیم ، حالا میرم سراغ استایل دهی (CSS) :

      کد:
      body {  height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
      }
      قدم دوم :

      برای کل صفحه یک استایل تعریف کردیم و بعد :

      کد:
      .vbiran {  display: inline-block;
        float: center;
        height: 240px;
        margin: -120px 0 0;
        padding: 0;
        position: relative;
        text-align: center;
        top: 50%;
        width: 33.33%;
      }
      برای div مورد نظر هم (vbiran) استایل تعریف کردیم و بعد از اون میرم سراغ استایل دهی به div متداخل (twitter-bird):

      کد:
      /* Twitter Bird */
      .twitter-bird {
      	background-image:url(http://up.vbiran.ir/uploads/136234457312321_0twitter-bird-sprite.png);
      	cursor: pointer;
      	display: inline-block;
      	height: 150px;
        margin: 50px -30% 0 0;
      	width: 150px;
      }
      
      
      .twitter-bird:hover {
      	-webkit-animation: fly 0.2s steps(3) 0 infinite;
      	-moz-animation: fly 0.2s steps(3) 0 infinite;
      	animation: fly 0.2s steps(3) 0 infinite;
      }
      برای این قسمت باید عکسی که به صورت sprite کمباین شده رو دانلود کنید ، براتون اخر اموزش اپلود کردم ! | اینم از این ، تا اینجا تصویر پرنده ی ما هیچ حرکتی نمیکنه و فقط نمایش داده میشه ولی بعد از این با چند تا keyframe پرواز میکنه :

      کد:
      @-webkit-keyframes fly {
      	from { background-position: 0 0; }
          to { background-position: -450px 0; }
      }
      @-moz-keyframes fly {
      	from { background-position: 0 0; }
          to { background-position: -450px 0; }
      }
      @keyframes fly {
      	from { background-position: 0 0; }
          to { background-position: -450px 0; }
      }


      و در اخر کد کامل :

      کد:
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
      }
      
      
      
      
      .vbiran {
        display: inline-block;
        float: center;
        height: 240px;
        margin: -120px 0 0;
        padding: 0;
        position: relative;
        text-align: center;
        top: 50%;
        width: 33.33%;
      }
      
      
      
      
      /* Twitter Bird */
      .twitter-bird {
      	background-image:url(http://up.vbiran.ir/uploads/136234457312321_0twitter-bird-sprite.png);
      	cursor: pointer;
      	display: inline-block;
      	height: 150px;
        margin: 50px -30% 0 0;
      	width: 150px;
      }
      
      
      .twitter-bird:hover {
      	-webkit-animation: fly 0.2s steps(3) 0 infinite;
      	-moz-animation: fly 0.2s steps(3) 0 infinite;
      	animation: fly 0.2s steps(3) 0 infinite;
      }
      
      
      @-webkit-keyframes fly {
      	from { background-position: 0 0; }
          to { background-position: -450px 0; }
      }
      @-moz-keyframes fly {
      	from { background-position: 0 0; }
          to { background-position: -450px 0; }
      }
      @keyframes fly {
      	from { background-position: 0 0; }
          to { background-position: -450px 0; }
      }
      خوب کار ما تموم شد ، پرنده ی ما اماده ی پرواز است | امیدوارم از این اموزش لذت برده باشید
      فایل های پیوست شده

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

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

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

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 178
    آخرين نوشته: 2016/10/20, 09:38 PM
  2. آموزش برچسب زدن خودکار بدون هک ( اختصاصی وی بی ایران )
    توسط Dastyar در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 79
    آخرين نوشته: 2015/07/22, 04:22 PM
  3. اموزش اختصاصی ساخت ( لوگوی متحرک تویتر )
    توسط Foutch در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 4
    آخرين نوشته: 2014/05/17, 06:43 PM
  4. پاسخ: 0
    آخرين نوشته: 2012/10/14, 05:49 PM
  5. پاسخ: 0
    آخرين نوشته: 2012/10/13, 10:39 PM

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

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

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