web前端卡片样式_jQuery和CSS3堆叠卡片样式导航菜单特效_html/css_WEB-ITnose

的HTML结构，其中div.demo__close-menu是汉堡包按钮，每一个div.demo__section是一个子页面。 Contact

About

Team

Projects

CSS样式

汉堡包图标按钮的样式如下： .demo__close-menu { position: absolute; left: 22px; top: 22px; width: 29px; cursor: pointer;}.demo__close-menu:before, .demo__close-menu:after { content: ""; position: absolute; left: 0; top: 8px; width: 100%; height: 4px; background: #7097B0;}.demo__close-menu:before { -webkit-transform: rotate(45deg); transform: rotate(45deg);}.demo__close-menu:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

堆叠卡片页面的主要CSS样式如下： .demo { overflow: hidden; position: absolute; width: 100%; height: 100%; background: #CDDBEE; border-radius: 6px;} .demo__section { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 25px 0 0 65px; border-radius: inherit; -webkit-transition: -webkit-transform 0.4s; transition: -webkit-tran