简单的Material Design风格手机App菜单特效-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

简单的Material Design风格手机App菜单特效

PHP中文网

May 17, 2016 am 09:07 AM

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

　　制作方法
　　HTML结构
　　该APP菜单的HTML结构使用嵌套

的HTML结构。导航菜单使用

<div class="phone">
  <div class="screen">
    <nav class="nav">
      <ul>
        <li><a href="#">搜　索</a></li>
        <li><a href="#">主　页</a></li>
        <li><a href="#">HTML5学习</a></li>
        <li><a href="#">CSS3学习</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
    <div class="nav-toggle">
      <div class="icon"></div>
    </div>
    <div class="lower-screen">
      <div class="card">
        <h2>Material cards</h2>
        <p>...</p>
      </div>
        
      <div class="card">
        <h2>..</h2>
        <p>...</p>
        </p>
      </div>
    </div>
  </div>
</div>

로그인 후 복사

　　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);
}

로그인 후 복사

　　整个效果的CSS代码十分简单，具体请参考下载文件。

以上就是简单的Material Design风格手机App菜单特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7364

자바 튜토리얼

1628

Cakephp 튜토리얼

1353

라라벨 튜토리얼

1265

PHP 튜토리얼

1214

Related knowledge

CMF Watch Pro 2의 새로운 디자인은 아무것도 보이지 않으며 CMF Phone 1에 대한 흥미로운 세부 정보가 드러납니다. Jun 27, 2024 am 10:42 AM

CMF Watch Pro 2, CMF Phone 1, CMF Buds Pro 2 등 세 가지 신제품이 2024년 7월 8일에 공개될 것이라는 사실은 지난 주에 이미 발표된 바가 없습니다. 이제 제조업체는 이 제품의 새로운 디자인 세부 정보를 공개하는 티저 이미지를 공개했습니다.

CSS로 사이드바 메뉴 특수 효과를 구현하기 위한 팁과 방법 Oct 24, 2023 am 10:33 AM

CSS를 사용하여 사이드바 메뉴 특수 효과를 구현하기 위한 팁 및 방법 최근 몇 년 동안 웹 디자인이 발전하면서 사이드바 메뉴는 많은 웹페이지의 공통 요소 중 하나가 되었습니다. 내비게이션 기능이든 콘텐츠 표시이든 관계없이 사용자에게 편리함과 더 나은 사용자 경험을 제공할 수 있습니다. 이 문서에서는 아름답고 특별한 사이드바 메뉴를 구현하는 데 도움이 되는 몇 가지 일반적인 CSS 기술과 방법을 소개합니다. 1. 기본 레이아웃 및 스타일 설정 먼저 사이드바 메뉴의 기본 레이아웃 및 스타일을 설정해야 합니다. 전체 사이드바를 나타내기 위해 div 요소를 사용할 수 있습니다.