*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
color: #444;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: #4e3c3e;
outline: none;
}
a:hover,
a:focus {
color: #f48b95;
}
#container {
width: 800px;
margin: 100px auto;
}
/* Common styles for all menus */
.menu {
line-height: 1;
margin: 0 auto 3em;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* Individual styles */
/* Miranda */
.menu--miranda .menu__item {
position: relative;
margin: 1em;
}
.menu--miranda .menu__link {
position: relative;
display: block;
min-width: 120px;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu--miranda .menu__link:hover,
.menu--miranda .menu__link:focus {
color: #929292;
}
.menu--miranda .menu__item--current .menu__link {
color: #d94f5c;
}
.menu--miranda .menu__item::before,
.menu--miranda .menu__item::after,
.menu--miranda .menu__link::before,
.menu--miranda .menu__link::after {
content: '';
position: absolute;
background: #d94f5c;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
-webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}
/* left and right line */
.menu--miranda .menu__item::before,
.menu--miranda .menu__item::after {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
/* left line */
.menu--miranda .menu__item::before {
left: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
/* right line */
.menu--miranda .menu__item::after {
right: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
/* top and bottom line */
.menu--miranda .menu__link::before,
.menu--miranda .menu__link::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
/* top line */
.menu--miranda .menu__link::before {
top: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
/* bottom line */
.menu--miranda .menu__link::after {
bottom: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
/* Delays (first reverse, then current) */
/* These rules can be simplified, but let's keep it for better readability */
/* bottom line */
.menu--miranda .menu__item .menu__link::after {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.menu--miranda .menu__item--current .menu__link::after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
/* left line */
.menu--miranda .menu__item::before {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.menu--miranda .menu__item--current::before {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
/* top line */
.menu--miranda .menu__item .menu__link::before {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.menu--miranda .menu__item--current .menu__link::before {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
/* right line */
.menu--miranda .menu__item--current::after {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.menu--miranda .menu__item--current::before,
.menu--miranda .menu__item--current::after,
.menu--miranda .menu__item--current .menu__link::before,
.menu--miranda .menu__item--current .menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید
برچسب : نویسنده : استخدام کار 7learn بازدید : 322 تاريخ : شنبه 22 اسفند 1394 ساعت: 4:31