這是一款非常簡單的Material Design風(fēng)格手機App菜單特效。該特效使用CSS3和少量的jQuery代碼來完成。在用戶點擊漢堡包菜單按鈕之后，按鈕會變形放大到整個手機APP屏幕，同時菜單選項會從屏幕下方滑動上來，效果非常酷。
制作方法
HTML結(jié)構(gòu)
該APP菜單的HTML結(jié)構(gòu)使用嵌套<div>的HTML結(jié)構(gòu)。導(dǎo)航菜單使用<nav>元素來制作。div.nav-toggle是用于制作圓形的擴展動畫，div.icon是漢堡包圖標(biāo)。
- <div class="phone">
- <div class="screen">
- <nav class="nav">
- <ul>
- <li><a href="#">搜 索</a></li>
- <li><a href="#">主 頁</a></li>
- <li><a href="#">HTML5學(xué)習(xí)</a></li>
- <li><a href="#">CSS3學(xué)習(xí)</a></li>
- <li><a href="#">聯(lián)系我們</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節(jié)目設(shè)計中，手機的界面采用固定的寬度和高度，并設(shè)置為固定定位。手機的屏幕也設(shè)置了固定的寬度和高度，并設(shè)置為相對定位。
- .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;
- }
漢堡包圖標(biāo)的包裹元素設(shè)置為一個半徑30像素的圓形。它的:before偽元素設(shè)置為和它同樣的大小，后面會使用這個偽元素來制作圓形擴展的動畫效果。
- .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;
- }
在用戶點擊了漢堡包圖標(biāo)之后，特效中使用jQuery代碼來為body元素切換class，當(dāng)body元素被添加了.nav-openclass之后，.nav-toggle:before偽元素開始動畫，圓形開始擴展。
- body.nav-open .nav-toggle:before {
- width: 1200px;
- height: 1200px;
- background-color: rgba(74, 117, 230, 0.95);
- }
本文版權(quán)屬于jQuery之家，轉(zhuǎn)載請注明出處：http://www.htmleaf.com/css3/daohangcaidan/201507132222.html
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。