Как бесконечно отображать логотип с помощью css

ProgramBox

Как бесконечно отображать логотип с помощью css

Post author:admin
Запись опубликована:26 февраля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я отображаю логотип бесконечно, но у меня возникает одна проблема. Я имею в виду, что в конце концов я получаю пространство. Я хочу бесконечную прокрутку.

 ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul li img {
  width: 100px;
}

.overflowHidden {
  overflow: hidden;
}

.marqueme {
  transform: translateZ(0);
  width: 1600px;
  -webkit-animation: d 40s linear infinite;
  animation: d 40s linear infinite;
}

@keyframes d {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.marqueme ul li {
  padding: 0 15px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="overflowHidden">
    <div class="marqueme">
      <ul>

        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
      </ul>
    </div>
  </div>

</div>

В конце я получаю вот так.

1. Да, вы получите полноэкранный режим, подождите некоторое время, в конце вы получите немного свободного места.

2. я заметил это, поэтому я удалил комментарий, но для этого вам понадобится javascript

3. @cornonthecob, возможно ли это с помощью CSS?

4. не уверен — хотя так не думаю

5. ОК. итак, можете ли вы помочь мне со сценарием до поры до времени?

Ответ №1:

Только CSS

Вместо этого анимируйте свой элемент внутри .marqueme , переход не будет заметен, потому что элементы возвращаются в положение своих братьев и сестер:

 .marqueme {
  transform: translateZ(0);
  width: 1600px;
}

li {
  animation: d 1s linear infinite;
}

 ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul li img {
  width: 100px;
}

.overflowHidden {
  overflow: hidden;
}

.marqueme {
  transform: translateZ(0);
  width: 1600px;
}

li {
  animation: d 0.3s linear infinite;
}

@keyframes d {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.marqueme ul li {
  padding: 0 15px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="overflowHidden">
    <div class="marqueme">
      <ul>

        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
        <li>
          <a href=""><img src="https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png"></a>
        </li>
      </ul>
    </div>
  </div>

</div>

PS: вам нужно намного меньше элементов li (и добавьте им класс для таргетинга на класс вместо таргетинга на li)

1. Спасибо за ответ, дайте мне немного времени, чтобы проверить

2. возможно, вы захотите замедлить эффект 🙂 слишком быстро!

3. Нужно действовать быстро! (Я согласен, это для быстрой демонстрации, было неприятно ждать 40 секунд, я доверяю автору и читателям изменить значение)

4. @devdgehog, да, я проверил, и это работает, но я замечаю, что если я добавил больше li (минимум 4-5), то это не работает. Нужно ли мне изменять ширину?

5. Да, если вы жестко задали ширину, это не сработает, если ширина содержимого меньше ширины родительского элемента, это еще одна проблема, которую вы могли бы (например, в качестве быстрого решения) использовать ul li img { width: 100%; } , или вы можете установить высоту для своего контейнера и использовать developer.mozilla.org/en-US/docs/Web/CSS/object-fit и отступы на ваших изображениях.

Ответ №2:

Попробуйте:

 .imageSlider {
  background: white;
  background-image: url(https://e7.pngegg.com/pngimages/340/745/png-clipart-computer-icons-white-instagram-icon-text-logo.png);
  background-size: 260px;
  width: 400%;
  height: 100%;
  position: relative;
  left: -100%;
  animation: slide 12.2s infinite;
  animation-timing-function: linear;
  z-index: 1;
}

.marqueme {
  position: fixed;
  width: 80%;
  height: 200px;
  z-index: 2;
}

@keyframes slide {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="overflowHidden">
    <div class="marqueme">
      <div class="imageSlider"></div>
    </div>
  </div>
</div>