» » » Бегущая строка на чистом css -marquee
26 0  

Бегущая строка на чистом css -marquee

marquee как тег в HTML5 перестал поддерживатся! Поэтому нужно его делать на чистом css. Здесь пример бегущей строки.

Код HTML:

<div class="marquee"><span>Пример бегущей строки</span></div>

CSS:

/* ==BLOCK- Бегущая строка == */
.marquee {display: block; width: 100%;white-space: nowrap;overflow: hidden;}
.marquee span {display: inline-block;padding-left: 100%;animation: scroll 25s infinite linear;transition: all .003s ease;}
@keyframes scroll {
	0% {transform: translate(-30%, 0);} 
	50% {transform: translate(-60%, 0)} 
	100% {transform: translate(-30%, 0);}
}

wink

  • Можно менять режим движения самой анимацией (keyframes) - кому как нужно.
  • Задать скорость движения бегущей строки  (в коде 25s)
    --
    Пишите  в комментариях кому какую сделать анимацию.

Бегущая строка - пример:

 
Пример бегущей строки

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019