Material Design 风格扩展遮罩面板界面设计

PetitQ 图片/图形 2019-1-24 1.57K 0 0

这是一款效果非常漂亮的 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);
```
```
}
```

Material Design 风格扩展遮罩面板界面设计

已有 393 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

Material Design 风格扩展遮罩面板界面设计

HTML 结构

CSS 样式

Material Design 风格扩展遮罩面板界面设计

相关文章

古卷轴平滑打开动画jQuery特效

20 款炫酷 css3 鼠标悬停图像显示效果

炫酷手机APP解锁动画和界面UI设计

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

Material Design 风格扩展遮罩面板界面设计

相关文章

发表回复 取消回复

热销模板

发表回复取消回复