Efectos de transición entre iconos
1 seguidor
Primero...no sé si irá este tema en este foro si no es así perdón!!
Veréis tengo una duda sobre un diseño que estoy montando...me gustaría hacer la transición que podéis ver en este demo de un tema de wordpress. Podéis verlo aquí
Si os fijáis, al desplegar el menú hace una transición que cambia las "barritas" del menú por una "X" para cerrarlo pero no encuentro la forma de hacer una transición similar en la web que quiero montar. Supongo que será un tipo de transición CSS pero no consigo atinar con ello.
¿Podríais orientarme un poco? O algún ejemplo quizás.
¡Gracias!
markosci
Mira que había mirado el código @montaycabe pero no me había parado mucho en él...Estaba en que era jQuery y jQuery y jQuery jejejeje.
A veces es más sencillo todo jajaja ¡Muchas gracias!
Usuario desconocido
En realidad, solo hay un elemento,
header.header .menu .toggle
Y con css ( ::before y ::after) añade dos barras mas que luego gira 45º y apaga la de enmedio, entre otras cosas:
header.header.active .menu .toggle:before {
top: 0px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
header.header.active .menu .toggle:after {
bottom: 0px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
Y en este cacho le dice los tiempos:
header.header .menu .toggle:before,
header.header .menu .toggle:after {
content: " ";
display: block;
height: 2px;
position: absolute;
width: 20px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
Son tecnicas de animacion en css3, está todo en el propio css:
http://demo.limitless.company/turin/wordpress/concept-6/wp-content/themes/turin/css/turin-layout.css