@charset "utf-8"; /* CSS Document */ /*手机端*/ .Hmenu-btn { width: 35px; height: 50px; padding: 24px 0 0; cursor: pointer; display: none; float: right; } .Hmenu-btn a { display: block; width: 100%; height: 3px; background-color: #4e4e4e; position: relative; } .Hmenu-btn a:before, .Hmenu-btn a:after { content: ""; display: block; width: 100%; height: 3px; background-color: #4e4e4e; position: absolute; left: 0px; } .Hmenu-btn a:before { top: -10px; } .Hmenu-btn a:after { bottom: -10px; } .Hmenu-btn.cur a { -moz-animation: buttonAnimation 0.3s ease forwards; -webkit-animation: buttonAnimation 0.3s ease forwards; -o-animation: buttonAnimation 0.3s ease forwards; animation: buttonAnimation 0.3s ease forwards; } .Hmenu-btn.cur a:before { -moz-animation: buttonAnimationBefore 0.3s ease forwards; -webkit-animation: buttonAnimationBefore 0.3s ease forwards; -o-animation: buttonAnimationBefore 0.3s ease forwards; animation: buttonAnimationBefore 0.3s ease forwards; } .Hmenu-btn.cur a:after { -moz-animation: buttonAnimationAfter 0.3s ease forwards; -webkit-animation: buttonAnimationAfter 0.3s ease forwards; -o-animation: buttonAnimationAfter 0.3s ease forwards; animation: buttonAnimationAfter 0.3s ease forwards; } @-moz-keyframes buttonAnimationBefore { 0% { -moz-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); } 50% { -moz-transform: translateY(10px) rotate(0); transform: translateY(10px) rotate(0); } 100% { -moz-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); } } @-webkit-keyframes buttonAnimationBefore { 0% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); } 50% { -webkit-transform: translateY(10px) rotate(0); transform: translateY(10px) rotate(0); } 100% { -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); } } @-o-keyframes buttonAnimationBefore { 0% { -moz-transform: translateY(0px) rotate(0); -ms-transform: translateY(0px) rotate(0); -webkit-transform: translateY(0px) rotate(0); -o-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); } 50% { -moz-transform: translateY(10px) rotate(0); -ms-transform: translateY(10px) rotate(0); -webkit-transform: translateY(10px) rotate(0); -o-transform: translateY(10px) rotate(0); transform: translateY(10px) rotate(0); } 100% { -moz-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg); -webkit-transform: translateY(10px) rotate(45deg); -o-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); } } @keyframes buttonAnimationBefore { 0% { -moz-transform: translateY(0px) rotate(0); -ms-transform: translateY(0px) rotate(0); -webkit-transform: translateY(0px) rotate(0); -o-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); } 50% { -moz-transform: translateY(10px) rotate(0); -ms-transform: translateY(10px) rotate(0); -webkit-transform: translateY(10px) rotate(0); -o-transform: translateY(10px) rotate(0); transform: translateY(10px) rotate(0); } 100% { -moz-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg); -webkit-transform: translateY(10px) rotate(45deg); -o-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); } } @-moz-keyframes buttonAnimationAfter { 0% { -moz-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -moz-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); } 100% { -moz-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); } } @-webkit-keyframes buttonAnimationAfter { 0% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); } 100% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); } } @-o-keyframes buttonAnimationAfter { 0% { -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -webkit-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -moz-transform: translateY(-10px) rotate(0); -ms-transform: translateY(-10px) rotate(0); -webkit-transform: translateY(-10px) rotate(0); -o-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); } 100% { -moz-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); -o-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); } } @keyframes buttonAnimationAfter { 0% { -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -webkit-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -moz-transform: translateY(-10px) rotate(0); -ms-transform: translateY(-10px) rotate(0); -webkit-transform: translateY(-10px) rotate(0); -o-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); } 100% { -moz-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); -o-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); } } @-moz-keyframes buttonAnimation { 0% { background: #aaaaaa; } 50% { background: rgba(255, 255, 255, 0); } 100% { background: rgba(255, 255, 255, 0); } } @-webkit-keyframes buttonAnimation { 0% { background: #aaaaaa; } 50% { background: rgba(255, 255, 255, 0); } 100% { background: rgba(255, 255, 255, 0); } } @-o-keyframes buttonAnimation { 0% { background: #aaaaaa; } 50% { background: rgba(255, 255, 255, 0); } 100% { background: rgba(255, 255, 255, 0); } } @keyframes buttonAnimation { 0% { background: #aaaaaa; } 50% { background: rgba(255, 255, 255, 0); } 100% { background: rgba(255, 255, 255, 0); } }