*,
*: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: 700px;
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 */
/* Trinculo */
.menu--trinculo .menu__item {
margin: 0 1.75em;
}
.menu--trinculo .menu__link {
position: relative;
padding: 1em 0.1em;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu--trinculo .menu__link:hover,
.menu--trinculo .menu__link:focus {
color: #929292;
}
.menu--trinculo .menu__link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
opacity: 0;
background: #d94f5c;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition: -webkit-transform 0s 0.2s, opacity 0.2s;
transition: transform 0s 0.2s, opacity 0.2s;
}
.menu--trinculo .menu__item--current .menu__link::before {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 0.2s, opacity 0.1s;
transition: transform 0.2s, opacity 0.1s;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.menu--trinculo .menu__helper {
display: block;
pointer-events: none;
}
.menu--trinculo .menu__item--current .menu__helper {
-webkit-animation: anim-trinculo 0.6s forwards;
animation: anim-trinculo 0.6s forwards;
}
@-webkit-keyframes anim-trinculo {
50% {
opacity: 0;
color: #929292;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
51% {
opacity: 0;
color: #d94f5c;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
75% {
opacity: 1;
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
opacity: 1;
color: #d94f5c;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes anim-trinculo {
50% {
opacity: 0;
color: #929292;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
51% {
opacity: 0;
color: #d94f5c;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
75% {
opacity: 1;
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
opacity: 1;
color: #d94f5c;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 271