|
nsform 1s;
transition:opacity 1s, z-index 0.3s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform:translateX(0);
}
.menu .btn .fa{
font-size:3em;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu .btn:hover .fa{
color: rgba(255, 255, 255, 0.7);
}
.menu .btn.btn-trigger{
opacity:1;
z-index:100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition:-webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu .btn.btn-trigger:hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.menu .btn-trigger:hover .line {
background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn-trigger:hover .line:before, .menu .btn-trigger:hover .line:after {
background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn-trigger .line{
height:6px;
width:60%;
background: #000;
border-radius: 6px;
-webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn-trigger .line:before, .menu .btn-trigger .line:after {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 6px;
background: #000;
border-radius: 6px;
-webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, -webkit-transform 0.3s;
transition: background-color 0.3s, transform 0.3s;
transition: background-color 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.menu .btn-trigger .line:before {
top: -12px;
-webkit-transform-origin: 15% 100%;
transform-origin: 15% 100%;
}
.menu .btn-trigger .line:after {
top: 12px;
-webkit-transform-origin: 25% 30%;
transform-origin: 25% 30%;
}
.menu .rotater{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.menu.active .btn-icon{
opacity:1;
z-index:50;
}
.menu.active .btn-trigger .line{
height:0;
top:45%;
}
.menu.active .btn-trigger .line:before{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width:110%;
}
.menu.active .btn-trigger .line:after{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width:110%;
}
/* 为每一个菜单添加旋转和平移效果 */
.rotater:nth-child(1){
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon{
-webkit-transform: translateY(-10em) rotate(45deg);
transform: translateY(-10em) rotate(45deg);
}
.rotater:nth-child(2){
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu.active .rotater:nth-child(2) .btn-icon{
-webkit-transform: translateY(-10em);
transform: translateY(-10em);
}
.rotater:nth-child(3){
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(3) .btn-icon{
-webkit-transform: translateY(-10em) rotate(-45deg);
transform: translateY(-10em) rotate(-45deg);
}
.rotater:nth-child(4){
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu.active .rotater:nth-child(4) .btn-icon{
-webkit-transform: translateY(-10em) rotate(-90deg);
transform: translateY(-10em) rotate(-90deg);
}
.rotater:nth-child(5){
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(5) .btn-icon{
-webkit-transform: translateY(-10em) rotate(-135deg);
transform: tra |