El menú cuadrado de morphing CSS/CSS3 puro
| Autor: | SperWalas |
|---|---|
| Views Total: | 3,136 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 7, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
En este post vamos a crear un botón de morphing genial que se expande en un menú cuadrado usando transiciones y transformaciones CSS3.
Funcionamiento
Cree un menú cuadrado de morphing usando una lista de de NAV anidada.
<nav> <ul> <li><a href="#" class="feed-btn"><i></i>Feed</a></li> <li><a href="#" class="profile-btn"><i></i>Profile</a></li> <li><a href="#" class="draft-btn"><i></i>New draft</a></li> <li><a href="#" class="signout-btn"><i></i>Sign out</a></li> </ul> </nav>
El núcleo CSS/CSS3 estilos.
nav {
width: 80px;
height: 80px;
position: fixed;
top: 40px;
left: 40px;
background: url("[email protected]") 0 0 no-repeat #242b33;
-moz-background-size: 80px;
-o-background-size: 80px;
-webkit-background-size: 80px;
background-size: 80px;
border-radius: 4px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
overflow: hidden;
}
nav ul { width: 400px; }
nav li {
width: 200px;
height: 200px;
float: left;
text-align: center;
opacity: 0;
-moz-transform: translateY(80px);
-ms-transform: translateY(80px);
-webkit-transform: translateY(80px);
transform: translateY(80px);
}
nav a {
display: block;
width: 100%;
height: 100%;
font-family: 'Source Sans Pro';
color: #fff;
font-weight: 400;
text-decoration: none;
}
nav i {
display: block;
width: 100px;
height: 100px;
margin: 40px auto 10px;
background: center no-repeat;
background-size: 100%;
}
nav .feed-btn i { background-image: url("icon-feed.svg"); }
nav .profile-btn i {
background-image: url("icon-profile.svg");
background-size: 115%;
}
nav .draft-btn i { background-image: url("icon-draft.svg"); }
nav .signout-btn i { background-image: url("icon-signout.svg"); }
nav:hover {
width: 400px;
height: 400px;
background-position: 0 -80px;
} Da el efecto de morphing fresco al menú cuadrado usando transiciones CSS3 y transforma
nav:hover {
width: 400px;
height: 400px;
background-position: 0 -80px;
}
nav:hover li {
opacity: 1;
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
nav:hover li:hover { background: #394451; }
nav { transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
nav li { transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
nav li:nth-child(1) {
-moz-transition-delay: 0.07s;
-o-transition-delay: 0.07s;
-webkit-transition-delay: 0.07s;
transition-delay: 0.07s;
}
nav li:nth-child(2) {
-moz-transition-delay: 0.14s;
-o-transition-delay: 0.14s;
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
nav li:nth-child(3) {
-moz-transition-delay: 0.21s;
-o-transition-delay: 0.21s;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
nav li:nth-child(4) {
-moz-transition-delay: 0.28s;
-o-transition-delay: 0.28s;
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.
