Material Design 风格手机App菜单特效

这是一款非常简单的 Material Design 风格手机 App 菜单特效。该特效使用 CSS3 和少量的 jQuery 代码来完成。在用户点击汉堡包菜单按钮之后，按钮会变形放大到整个手机 APP 屏幕，同时菜单选项会从屏幕下方滑动上来，效果非常酷。

HTML 结构

该 APP 菜单的 HTML 结构使用嵌套

的 HTML 结构。导航菜单使用

元素来制作。div.nav-toggle 是用于制作圆形的扩展动画，div.icon 是汉堡包图标。

CSS 样式

在这个 APP 节目设计中，手机的界面采用固定的宽度和高度，并设置为固定定位。手机的屏幕也设置了固定的宽度和高度，并设置为相对定位。

.phone {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 280px;
  height: 580px;
  border-radius: 40px;
  background-color: white;
}
.phone .screen {
  width: 260px;
  height: 450px;
  background-color: #ECEBE9;
  display: block;
  margin: 65px auto;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  border: 4px solid #262626;
}

汉堡包图标的包裹元素设置为一个半径 30 像素的圆形。它的:before 伪元素设置为和它同样的大小，后面会使用这个伪元素来制作圆形扩展的动画效果。

.nav-toggle {
  width: 60px;
  height: 60px;
  z-index: 2;
  border-radius: 50%;
  margin: 10px;
  position: absolute;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
}
.nav-toggle:before {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #4A75E6;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transition-duration: 0.66s;
          transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
          transition-timing-function: swing;
}

在用户点击了汉堡包图标之后，特效中使用 jQuery 代码来为 body 元素切换 class，当 body 元素被添加了.nav-openclass 之后，.nav-toggle:before 伪元素开始动画，圆形开始扩展。

body.nav-open .nav-toggle:before {
  width: 1200px;
  height: 1200px;
  background-color: rgba(74, 117, 230, 0.95);
}

免责声明：本站所有素材资源均来自用户分享和网络收集，大部分未经测试可用，并不保证百分百无误及完整，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

主页 > 网页素材 > JS代码 > Material Design 风格手机App菜单特效

Material Design 风格手机App菜单特效

HTML 结构

猜你喜欢

标签云

随机文章