Muy buenas a todos, y bienvenidos a la décima, y última clase de nuestro curso de Introducción a CSS. Pondremos el broche final con uno de los elementos más impactantes de este editor de hojas de estilos. Las transiciones.
Conoceremos de que se trata el concepto de transiciones en el diseño web, así como de qué forma pueden ayudarnos a personalizar nuestro código.
¡Vamos a ello!
.
RESUMEN DEL VÍDEO:
Veremos cómo hacer una transición con la etiqueta transition, que, comprobando lo que el elemento tiene anteriormente, ejecuta una serie de acciones y lo transformará.
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html>
<head>
<title>Transiciones</title>
<style>
p{
width: 300px;
text-align: center;
font-size: 4em;
transition-property: transform;
transition-duration: 2s;
}
p:hover {
color: red;
transform:rotate(270deg);
transition-property: transform;
transition-duration: 2s;
transition-delay: 0.5s;
}
#carretera {
position: relative;
width: 70%;
margin: 0 auto;
background: url('carretera1.jpg');
height: 500px;
overflow: scroll;
}
#coche {
width: 200px;
position: absolute;
left: 0%;
bottom: 35px;
transition-property: left;
transition-duration: 3s;
}
#coche2 {
width: 200px;
position: absolute;
left: 0%;
bottom: 75px;
transition-property: left;
transition-duration: 2s;
}
#carretera:hover #coche {
left: 100%;
transition-property: left;
transition-duration: 3s;
}
#carretera:hover #coche2 {
left: 100%;
transition-property: left;
transition-duration: 4s;
}
</style>
</head>
<body>
<div id="carretera">
<img src="coche.png" alt="mclaren" id="coche">
<img src="coche.png" alt="mclaren2" id="coche2">
</div>
<p>Un texto</p>
</body>
</html>Ahora que conoces los conceptos básicos de CSS 3, es hora de investigar y de darle un estilo personalizado a vuestros proyectos.
Queremos recordar que si es necesaria alguna aclaración referente a alguno de los conceptos impartidos durante este curso, sólo tienen que ponerse en contacto con nosotros, a través de la pestaña de soporte.
¡Nos vemos en el próximo curso!