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

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

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

  • 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

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

не в сети 2 месяца

GOOD WEBMASTER

50
В наличии любые плагины и темы последних версий от компании AIT THEMES

Поддержать проект монетой можно так: https://money.yandex.ru/to/410012768487959
Комментарии: 6Публикации: 262Регистрация: 17-12-2017

Метки

| |