html隐藏汉堡按钮,HTML5 简单的汉堡包按钮动效 141005

按钮,HTML5 简单的汉堡包按钮动效 141005"/>

html隐藏汉堡按钮,HTML5 简单的汉堡包按钮动效 141005

CSS

语言：

CSSSCSS

确定

html {

background-color: #f4eeec; }

.tab {

position: fixed;

z-index: 1000;

top: 50%;

left: 50%;

width: 70px;

height: 70px;

margin-left: -35px;

margin-top: -35px;

border: 1px solid #e6e4e3;

cursor: pointer;

background-color: #fff; }

.tab .bars {

position: absolute;

top: 0;

left: 0;

width: 70px;

height: 100%;

border-right: 1px solid #e6e4e3; }

.tab .bars span {

position: absolute;

top: 50%;

left: 50%;

display: block;

width: 26px;

height: 3px;

margin-left: -13px;

margin-top: -1px;

background-color: #f15c28;

-webkit-transition: all 0.15s ease;

transition: all 0.15s ease; }

.tab .bars span:first-child {

margin-top: -7px; }

.tab .bars span:nth-child(2) {

-webkit-transition-delay: 0.075s;

transition-delay: 0.075s; }

.tab .bars span:last-child {

margin-top: 5px;

-webkit-transition-delay: 0.15s;

transition-delay: 0.15s; }

.tab:hover .bars span {

width: 30px;

margin-left: -15px; }

.tab.active .bars span {

width: 0;

margin-left: -15px; }

.tab.active .bars span:first-child {

margin-top: 0px;

width: 30px;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg); }

.tab.active .bars span:last-child {

margin-top: 0px;

width: 30px;

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transition-delay: 0.15s;

transition-delay: 0.15s; }