Как сделать пролистывающийся текст на CSS3.
Всем привет! В этой небольшой статье я покажу пример, как можно сделать пролистывающийся текст на чистом CSS3.
Для начала сделаем структуру:
<h1 class="marquee">
<span>Здесь вы можете написать любой текст</span>
</h1>
А теперь небольшие стили:
@keyframes scroll {
0% {
transform: translate(0,0);
}
100% {
transform: translate(-100%,0);
}
}
.marquee {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: scroll 5s infinite linear;
}
Думаю, тут пояснять особо нечего, все и так понятно.
А у меня на этом все. Спасибо за внимание!
-
Создано 19.09.2014 20:45:55
-
Михаил Русаков
Комментарии (1):
Особого прикола нет, и к сайту негде прилепить...
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.