گیفت کارت آیتونز
نمایش نتایج: از 1 به 5 از 5

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

  1. Top | #1
    کاربر سایت

    تاریخ عضویت
    Feb 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    116
    مورد پسند
    113 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 22.0.1229.79
    میزان امتیاز
    20

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

    سلام دوستان امروز با یک اموزش متفاوت درخدمتتون هستم ، امروز میخوام بهتون اموزش بدم که میشه به راحتی با استفاده از چند تا 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; }
    }
    خوب کار ما تموم شد ، پرنده ی ما اماده ی پرواز است | امیدوارم از این اموزش لذت برده باشید
    فایل های پیوست شده فایل های پیوست شده

    7 تشکر توسط:







  2. گیفت کارت آیتونز

  3. Top | #2
    کاربر سایت

    تاریخ عضویت
    Jan 2013
    ورژن ویبولتین
    4.2.0
    نوشته ها
    11
    مورد پسند
    0 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 19.0
    میزان امتیاز
    0

    پیش فرض

    دوست عزیز ، کار نکرد!
    نیاز به فعالیت شما دوستان : http://forum.mahtabdl.com

  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    Feb 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    116
    مورد پسند
    113 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 22.0.1229.79
    میزان امتیاز
    20

    پیش فرض

    دوست عزیز این لوگو روی مروگر های IE کار نمیکنه !



  5. Top | #4
    کاربر سایت

    تاریخ عضویت
    Nov 2011
    ورژن ویبولتین
    4.2
    نوشته ها
    66
    مورد پسند
    0 بار
    اطلاعات
    Mac OS X 10.8 Firefox 19.0
    میزان امتیاز
    14

    پیش فرض

    مرسیییییی

  6. Top | #5
    کاربر سایت

    تاریخ عضویت
    Mar 2014
    ورژن ویبولتین
    phpbb
    نوشته ها
    2
    مورد پسند
    0 بار
    اطلاعات
    Windows 8 Firefox 29.0
    میزان امتیاز
    0

    پیش فرض

    سلام تو کروم کار میکنه ولی تو فایرفاکس کار نمیکنه چرا؟

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

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

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

موضوعات مشابه

  1. پاسخ: 185
    آخرين نوشته: 2018/06/13, 12:23 AM
  2. پاسخ: 2
    آخرين نوشته: 2013/05/06, 08:34 PM
  3. پاسخ: 0
    آخرين نوشته: 2012/10/14, 05:49 PM
  4. پاسخ: 0
    آخرين نوشته: 2012/10/13, 10:39 PM
  5. پاسخ: 4
    آخرين نوشته: 2012/05/18, 09:17 PM

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

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

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

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

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