Бегущая строка CSS / Эффекты / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 135

Количество символов:

Посмотрели: 7226 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.9 / 5 - 12 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, текст, Bootstrap, анимация, marquee, анимировать, ANIMATE, бутстрап, animation

Поделился: BootstrapТема

Добавлено: 2015-11-30 в 11:35

Метка: 1582173409

⇄ ⇅

@keyframes scroll {
 0% {
 transform: translate(0, 0);
 }
 100% {
 transform: translate(-100%, 0)
 }
}

.marquee {
 max-width: 100%;
 white-space: nowrap;
 overflow: hidden;
}

.marquee * {
 display: inline-block;
 padding-left: 100%;
 -webkit-animation: scroll 21s infinite linear;
 animation: scroll 21s infinite linear;
}
.marquee *:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>

<div class="container"><div class="row">
<div class="col-xs-12 marquee"><span>Анимированная бегущая строка на CSS для остановки наведите на текст</span></div>
<div class="col-xs-12 marquee"><h1>Анимированная бегущая строка на CSS для остановки наведите на текст</h1></div>
<div class="col-xs-12 marquee"><p class="lead">Анимированная бегущая строка на CSS для остановки наведите на текст</p></div>
</div></div>

BootstrapTema

Бегущая строка CSS

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0