Как сделать бегущую строку на чистом CSS

Было время, когда можно было сделать бегущую строку только при помощи HTML, используя тег <marquee>
Теперь уже так не сделаешь, а поэтому, я расскажу вам как сделать бегущую строку на чистом CSS и не используя JS.

HTML

<header class="header ticker-wrapper">
  <div class="ticker-wrapper__first-half">
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p></div>
  <div class="ticker-wrapper__second-half">
  <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
  </div>
</header>

CSS

.header {
  background: #212121;
  overflow: hidden;
  height: 65px;
  position: relative;

  div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 65px;
    transform: translate(100%, 0);

    p {
      font-family: 'Roboto', sans-serif;
      color: #fff339;
      text-transform: uppercase;
    }
    img{
      height: 60px;
    }
  }

  $duration: 30s;

  .ticker-wrapper__first-half, .ticker-wrapper__second-half {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    animation: ticker $duration infinite linear forwards;
  }

  .ticker-wrapper__second-half {
    animation: $duration ticker $duration/2 infinite linear forwards;
  }
}

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

  50% {
    transform: translate(0, 0);
  }

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

 

ДЕМО

Все довольно просто, но если у вас остались вопросы или есть интересные темы для статьи, которые хотите что бы я подсветил, оставляйте свои комментарии 🙂
И еще, не забудьте подписаться на наш телеграм-канал, чтобы вы всегда были вкурсе новых статей, книг и курсов 😉

Оставьте ответ

comment-avatar

*