Lo primero que tenemos que hacer es crear nuestro div:
Código:
<div class="boxanimada">Este es un contenedor con transiciones</div>
Ahora vamos a adornarla un poco para que sea mas bonita:
Código:
.boxanimada {
background-color: #4462D5; /* COLOR DE FONDO */
color: #EEEEEE; /* COLOR DEL TEXTO */
display: table-cell;
font-size: 20px; /* TAMAÑO DE LA FUENTE */
height: 50px; /* ESTO SE PUEDE BORRAR */
line-height: 1.5em;
margin: 0 auto;
padding: 10px;
text-align: center;
vertical-align: middle;
width: 400px; /* ESTO SE PUEDE BORRAR */
}
Ya tenemos el cuadro preparado, pero no tenemos la animacion asi que ahora añadimos este CSS que hara que funcione en Mozilla y Chrome:
Código:
-moz-transition: all 0.5s ease 0.5s;
Ese códe lo añadimos a el primero. El primer valor definirá el tiempo que tarde en cambiarse de Normal a Hover, y el segundo establecera un retraso desde que pasamos el mouse y comienza la animación.
oie muy bueno pero para cambiar el color NEGRO que se pone al pasar el mause por la tablas donde se modifica el color? ______________ Visitar sitio web
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.