Marquee ejemplos css3

La etiqueta marquee ejemplos css3, crea una marquesina con un texto en su interior que se desplaza, es una etiqueta no estándar de HTML, que soportan los navegadores más comunes, pero que no están comprendidas dentro de las especificaciones de HTML. Sirve para animar elementos dentro de la página. En concreto permite que el contenido que pongamos dentro de la etiqueta, ya sea texto, fotografías, o las dos cosas, se desplace horizontalmente por la página.

Demo 1

Bienvenido a AjMrDeSiGn, demo 1

<marquee id="ajmrdesign-1">...texto...</marquee>

/* css demo 1
-----------------------------------------------
*/
#ajmrdesign-1 {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
padding: 15px 10px 15px 10px;
font-size: 18px;
color: #333;
border: 1px solid #efefef;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Demo 2

Bienvenido a AjMrDeSiGn, demo 2

<marquee id="ajmrdesign-2" direction="right">...texto...</marquee>

/* css demo 2
-----------------------------------------------
*/
#ajmrdesign-2 {
background: #ffa84c;
background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d));
background: -webkit-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%);
background: -o-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%);
background: -ms-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%);
background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
padding: 15px 10px 15px 10px;
font-size: 18px;
color: #fff;
border: 1px solid #ff7b0d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Demo 3

Bienvenido a AjMrDeSiGn, demo 3

<marquee id="ajmrdesign-3" scrolldelay="100">...texto...</marquee>

/* css demo 3
-----------------------------------------------
*/
#ajmrdesign-3 {
background: #ffd65e;
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04));
background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%);
background: linear-gradient(to bottom, #ffd65e 0%,#febf04 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
padding: 15px 10px 15px 10px;
font-size: 18px;
color: #000;
border: 1px solid #febf04;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Demo 4

Bienvenido a AjMrDeSiGn, demo 4

<marquee id="ajmrdesign-4" direction="right">...texto...</marquee>

/* css demo 4
-----------------------------------------------
*/
#ajmrdesign-4 {
background: #a90329;
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
padding: 15px 10px 15px 10px;
font-size: 18px;
color: #fff;
border: 1px solid #6d0019;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Los parámetros son los siguientes

align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma.

direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right)

loop = num / infinite Indica el numero de veces que se desplazará el texto por la marquesina. Si se indica infinite, se desplazará indefinidamente.

scrolldelay = num. Indica el número de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor número mas lentamente se desplazará el texto.