Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

SEO-продвижение сайта в ТОП поисковых систем. Рост позиций в первый месяц. Закажите услугу в Lion Digital. Ваш надежный партнер в интернет-маркетинге.

от 25000 

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Как сделать бегущую строку в css

Для создания бегущей строки в CSS можно использовать свойство animation. Для этого нужно определить анимацию с помощью @keyframes, затем применить её к элементу с помощью animation.

Пример кода для создания бегущей строки:

HTML:

<div class="marquee-container">
  <div class="marquee">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

CSS:

.marquee-container {
  overflow: hidden;
  height: 20px;
}

.marquee {
  animation: marquee 10s linear infinite;
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

В этом примере элемент .marquee содержит бегущий текст, который находится внутри контейнера .marquee-container. Контейнер .marquee-container имеет фиксированную высоту и overflow: hidden, чтобы скрыть содержимое .marquee, которое выходит за его границы.

Анимация определена с помощью @keyframes. В начале анимации (0%), текст находится в начальном положении, а в конце (100%) текст сдвигается влево на 100% от ширины элемента .marquee.

С помощью animation анимация marquee применяется к элементу .marquee, её длительность равна 10 секундам, linear определяет равномерную скорость перемещения текста, а infinite позволяет анимации циклически повторяться.

Чтобы текст перемещался горизонтально, не переносится на новую строку, свойство white-space установлено в значение nowrap, а для сдвига содержимого внутри .marquee используется padding-right: 100%.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.