Простой пример бегущей строки на сайт спомощью 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 – сама анимация.
Готово!
