Бегущая строка на сайт с помощью CSS

Бегущая строка на сайт с помощью CSS

Простой пример бегущей строки  на сайт спомощью CSS.

Вставляем текст в нужное место на сайте где будет бежать строка с нужной информацией:

<div class="marquee">Наш пример бегущего текста на сайте good-webmaster. Текст, который будет двигаться с права налево.</div>

Теперь и сам стиль текста

.marquee{
width:100%;
white-space:nowrap;
overflow:hidden;
}
 
.marquee span {
color:#212121;
font-size:25px;
display:inline-block;
padding-left:100%;
-webkit-animation: marquee 10s infinite linear;
animation: marquee 10s infinite linear;
}
 
@-webkit-keyframes marquee {
0%{-webkit-transform: translate(0, 0);}
100%{-webkit-transform: translate(-100%, 0);}
}
@keyframes marquee{
0%{transform: translate(0, 0);}
100%{transform: translate(-100%, 0)}
}
  • width:100%; – Задаем ширину родительскому блоку marquee.
  • white-space:nowrap; – запрещаем перенос слов на другую строку.
  • overflow:hidden; – обрезаем все что выходит за блок с бегущей строкой, чтобы не было казусов.

Далее стили для span:

  • display:inline-block; – делаем span строчно-блочным элементом
  • padding-left:100%; – делаем отступ слева на всю ширину родительского блока.
  • -webkit-animation и animation – применяем анимацию к блоку. Время выполнения анимации 10 секунд. Можете менять значение на свое.
  • @-webkit-keyframes marquee и @keyframes marquee – сама анимация.

Готово!

0

Автор публикации

не в сети 3 недели

FSM

777
Высшая ступень членства компании AitThemes и Citadela - Agency Multi Membership
Комментарии: 6Публикации: 472Регистрация: 28-06-2021