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

Опубликовано: 01.09.2018

Сегодня расскажу, как сделать бегущую строку в bootstrap3 .

В чем же фишка? Строка движется как в обычном HTML, но при наведении на строку, она останавливается. Естественно, нужно будет дописать немного своих CSS стилей, но эффект красивый.

Статья будет не большой, так что много времени вашего я не заберу.

Итак, вставьте в ваш файл между тегами <body></body> вот такой код:

<div class="marquee"><span>Бегущая строка для bootatrap3 - BlogGood.ru. Для остановки наведите на текст</span></div>

Теперь добавьте вот этот CSS стиль перед тегом </head> :

<style> @-webkit-keyframes scroll { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0) } } @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>

Вот и все! Проверяйте. Текст должен быть анимированный и, при наведении на него курсора мыши, должен остановиться.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: Bootstrap

rss