Альтернатива <marquee> средствами CSS

stream

Support
Команда форума
Регистрация
09.09.14
Сообщения
972
Реакции
635
Баллы
93
В секции <head><style> вставляем код css:
CSS:
   .marquee {
   padding-right: 5px;
    overflow: hidden; /* скрываем строку за ее пределами */
    white-space: nowrap; /* запрещаем переносы слов */
    -webkit-animation: marquee 30s linear infinite;
    animation: marquee 30s linear infinite;
   }
   .marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused; /* пауза при наведении курсора */
   }
   @-webkit-keyframes marquee {
    from { text-indent: 100%; }
    to { text-indent: -100%; }
   }
   @keyframes marquee {
    from { text-indent: 100%; }
    to { text-indent: -100%; }
   }
В секции <body> пишем код html:
HTML:
<div class="marquee">                 
Ваш текст
</div>
...Дескриптор <marquee> признан устаревшим, и не рекомендуется к использованию. Вывод динамичного текста при помощи css более плавный, без рывков.
Тестировалось в Mozilla Firefox, Opera.
 
Сверху Снизу