这是一款效果非常漂亮的Material Design风格扩展遮罩面板界面设计。在页面的下方有多个菜单选项,当用户点击其中某个选项时,它会变形扩展为全屏遮罩层,动画过渡非常平滑自然,效果很酷。
使用方法
HTML结构
所有的方形选项卡都是由无序列表来制作,每一个选项卡对应的内容面板也是由一个无序列表组成。
<ul class="blocks-names"> <li class="blocks__name">Eggs</li> <li class="blocks__name">Bacon</li> <li class="blocks__name">Toast</li> <li class="blocks__name">Donuts</li> <li class="blocks__name">Coffee</li> </ul> <ul class="blocks"> <li id="1" class="blocks__block"></li> <li id="2" class="blocks__block"></li> <li id="3" class="blocks__block"></li> <li id="4" class="blocks__block"></li> <li id="5" class="blocks__block"></li> </ul> <ul class="blocks-content"> <li class="blocks-content__content"> <div class="content__close"></div> <h2>Eggs</h2> <p>...</p> <i class="blocks__content-close fa fa-close"></i> </li> ...... </ul>
CSS样式
方块选项卡的无序列表采用绝对定位,规定在页面的底部。并且设置它的显示方式为flex
。
.blocks { position: fixed; bottom: 0; z-index: 1; list-style-type: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin: 0; padding: 0; }
方块选项卡中的每一个列表项使用相对定位,高度设置为1/5视口高度。flex: 1;
的意思是让所有的列表项宽度相等,使用这个属性的好处是无论你在网里面加或减少选项,它们的宽度都能保持相等。关于这个属性可以参考:Flexbox使用向导-深入理解flex属性。will-change
属性用于浏览器性能的优化。最后更为动画过渡设置了指定的贝兹曲线。
.blocks__block { will-change: transform; position: relative; height: 20vh; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
遮罩层内容无序列表同样使用绝对定位,高度和宽度与视口大小相等。
.blocks-content { list-style-type: none; margin: 0; padding: 0; position: absolute; bottom: 0; left: 0; height: 100vh; width: 100%; }
它里面的内容同样使用flex
来显示,里面的各种flex属性的使用方法可以参考:CSS3 flexbox简介和使用指南。
.blocks-content { list-style-type: none; margin: 0; padding: 0; position: absolute; bottom: 0; left: 0; height: 100vh; width: 100%; } .blocks-content__content { will-change: transform, opacity; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: fixed; width: 100%; z-index: 3; top: 0; left: 0; height: 100vh; padding: 10vw; font-size: 20px; opacity: 0; visibility: hidden; text-align: center; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: all 0.3s 0.2s ease-out; transition: all 0.3s 0.2s ease-out; } .blocks-content__content.active { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; } .blocks-content .blocks__content-close { position: absolute; right: 2vw; top: 2vh; font-size: 30px; cursor: pointer; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .blocks-content .blocks__content-close:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }