0

Всем привет, мне нужно сделать что то на подобии бегущей строки на CSS Но вместо текста будет картинка мне нужно вращать эту картинку в права на лево без каких либо пробелов Грубо говоря заРепитить ее, пытался сделать таким образом, но есть большой пробел справа

HTML

<div class="scroll_bg" id="scroll_bg">
<img src="../img/jpg/slide_0.png">
<img src="../img/jpg/image.jpg">
</div>

SASS

@keyframes scroll
    0%
        transform: translate(0, 0)
    
    100%
        transform: translate(-100%, 0)

.scroll_bg
    display: block
    width: 100%
    white-space: nowrap
    overflow: hidden
    
    img
        display: inline-block
        padding-left: 100%
        -webkit-animation: scroll 5s infinite linear
        -moz-animation: scroll 5s infinite linear
        animation: scroll 5s infinite linear

2 ответа 2

1

Если совсем через css - то можно вот так вот.

@keyframes scroll{
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}
.scroll_bg {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.img {
  display: inline-block;
  padding-left: 100%;
  -webkit-animation: scroll 5s infinite linear;
  -moz-animation: scroll 5s infinite linear;
  animation: scroll 5s infinite linear;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/220px-Hopetoun_falls.jpg);
  width: 220px;
  height: 147px;
  margin-left: -5px;
}
<div class="scroll_bg" id="scroll_bg">
  <div class="img"></div>
  <div class="img"></div>
</div>

-1

Ня =)

<marquee><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/220px-Hopetoun_falls.jpg"></marquee>

2
  • Тег объявлен как deprecated, значит, браузеры могут убрать его поддержку в любой момент, и вся функциональность пропадёт
    – lezhni
    16 дек 2021 в 13:45
  • Ага. Это я добавил больше хохмы ради - чтобы показать, что иногда лучшее - враг хорошего... 16 дек 2021 в 19:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.