-
Cómo poner en movimiento Imágenes CSS
-
El uso de hojas de estilo en cascada (CSS) proporciona al diseñador de páginas web con la capacidad de crear animaciones de imágenes. El diseñador utiliza las reglas CSS para colocar tanto de forma estática (sin movimiento) y dinámica (en movimiento o animada) elementos de imagen. Esto crea la impresión de movimiento en la pantalla del navegador web. Puede desarrollar este contenido imagen dinámica sin el uso de archivos gráficos grandes autónomo animados.Instrucciones
1 Recortar la parte animada de la imagen en movimiento con su programa de gráficos de su elección. Guardar la animación por separado del resto de la imagen. Ahora debe tener dos archivos. Un archivo debe contener la animación y el otro archivo debe contener las partes no animada de la imagen.
2 Iniciar un nuevo documento de la tela y el estilo de un div principal con una nueva regla CSS. Un div es un elemento web individual. Este elemento en particular se ajustará alrededor de todo su código. En este ejemplo, un nuevo div maestro ha sido creado. El div ha sido diseñado para cubrir el 100% de la anchura y la altura de la pantalla de la web visitante del sitio utilizando las propiedades CSS de la posición, anchura y altura.
.masterDiv {
position: relative;
width: 100%;
altura: 100%;
}
3 Escribir las reglas para su elemento de imagen, que contendrán un fondo que ofrece los componentes no animadas de la imagen en movimiento. Utilice la propiedad padding CSS para calibrar la colocación de la parte animada de la imagen. En este ejemplo, la propiedad padding superior se establece en 300 píxeles, el derecho de propiedad es de 50 píxeles, la propiedad es inferior a 10 píxeles y la propiedad queda es 200 píxeles. El uso de estas especificaciones, la animación aparecerá en la esquina inferior derecha de la imagen. La animación se posicionará 50 píxeles desde la parte derecha de la imagen y 300 píxeles hacia abajo desde la parte superior.
img {
padding: 50px 10px 300px 200px;
background: url (nonAnimatedSection.jpg) no-repeat;
}
4 Aplicar sus nuevas reglas para el documento HTML y adjuntar la imagen animada usando la etiqueta img. La imagen de HTML, que se utiliza para mostrar un objeto de imagen, fue diseñado con la regla CSS en el ejemplo anterior. En el ejemplo el archivo .gif, animiatedSection.gif, se utiliza como la animación. Tendrá que sustituir su propio nombre de archivo.
<Div class = "masterDiv>
<Img src = "animatedSection.gif" alt = "mi foto animada" />
</ Div>
Consejos y advertencias
- Aquí está el código completo para el ejemplo, ya que se incrusta en un sitio web.
- <Html>
- <Head>
- <Style>
- .masterDiv {
- position: relative;
- width: 100%;
- altura: 100%;
- }
- img {
- padding: 50px 10px 300px 200px;
- background: url (nonAnimatedSection.jpg) no-repeat;
- }
- </ Style>
- </ Head>
- <Body>
- <Div class = "masterDiv>
- <Img src = "animatedSection.gif" alt = "mi foto animada" />
- </ Div>
- </ Body>
- </ Html>
