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

وبمستر

توسط parsa در 5 سال پیش
0 34.6k 1 5 سال پیش
parsa reza
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

خوش آمدید

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