BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Bootstrap » Бегущая строка в bootstrap3

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

2016-09-14 / Вр:15:01 / просмотров: 6525

Сегодня расскажу, как сделать бегущую строку в 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>

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

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

Получай обновления блога!!! Подпишись:

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

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки:

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716