متحرک کردن تصویر پس زمینه؟

وبمستر

توسط parsa در 3 سال پیش
0 1.8k 1 3 سال پیش
parsareza-irdev
0

سلام. دوستان من خیلی گشتم اما نفهمیدم چطوری عکسرو متحرک میکنن مثل این http://laravel.ir قسمت فوتر رو ببینید عکس چند نفره که داره به سمت چپ حرکت میکنه؟

3

سلام با CSS animation خیلی راحت میتونید اینکار رو انجام بدید. مثال:

body{

  background-image: url(http://www.softafzar.net/uploads/avatars/avatar_2.png?dateline=1416378317);

  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}


@keyframes move {
    from {background-position: 0px 0px}
    to {background-position: 77px 0px}
}

@-moz-keyframes move {
    from {background-position: 0px 0px}
    to {background-position: 77px 0px}
}

@-webkit-keyframes move {
    from {background-position: 0px 0px}
    to {background-position: 77px 0px}
}

فقط 77 رو به  width تصویر تغیر بدید.

دمو

آخرین ویرایش: 24-02-2015 ساعت 09:35، توسط Reza

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید