整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
種3D盒子收起來的動畫效果是怎么實現(xiàn)的？1分鐘就可以教會你。
經(jīng)過前兩節(jié)課的學(xué)習(xí)，大家應(yīng)該都知道給容器設(shè)置3D屬性是編寫3D動畫的前提。
·首先給容器body設(shè)置3D動畫屬性。
·接下來肯定就是要寫盒子了，盒子一般有6個面，聰明的各位肯定能夠想到先寫6個面用來展示盒子的6個平面，這種思路肯定是沒有錯的。借助動畫的3D旋轉(zhuǎn)、3D位移等等屬性，肯定可以將6個面去組合組裝成一個盒子。但是想要讓6個DIV組成盒子進行立體旋轉(zhuǎn)，沒有一個平面的支撐其實是白費力氣。
·如果先寫一個div作為立方體盒子的參考平面，讓平面帶動6個面進行旋轉(zhuǎn)位移，就變得非常簡單了。首先在盒子容器中添加6個div作為盒子6個面，但是記得把盒子的最后兩個面用同一個div包裹起來。至于為什么，一會來詳細講解。先看一下實現(xiàn)的效果，好像還不錯。
·然后去拆解剛才的動畫動作，通過代碼的旋轉(zhuǎn)位移實現(xiàn)一個正方體。利用動畫屬性將組成正方體的平面位移旋轉(zhuǎn)動作進行拆解，利用@keyframes進行逐幀延遲調(diào)用，這樣就能實現(xiàn)一個完整的動畫的演示。
·一個正方體的動畫折疊動作就已經(jīng)寫完了，回顧一下最后兩個面的折疊。如果想要讓兩個面變成一個協(xié)調(diào)的整體，是需要將最后兩個面一起產(chǎn)生折疊動作的，拆分開來去寫兩個平面，無法實現(xiàn)這種合并動畫的效果。
·最后給整個平面添加上隨機的角度旋轉(zhuǎn)和剛才的折疊動畫進行組合，一個完整的盒子折疊動畫就完成了。
點贊&關(guān)注AUVWEB。
近做了一個郵件模板功能，就是可以在后臺定義各種情況下的發(fā)送郵件驗證碼的模板，如下圖所示：
可以定義「注冊賬號」，「重置密碼」，「驗證郵箱」等各種情況下的郵件模板的標(biāo)題和內(nèi)容。使用 WPJAM Basic 的生成表單功能，實現(xiàn)是非常簡單，具體的代碼就是生成三個 fieldset 字段組，使用 foreach 簡單就能處理：
$fields = [];
foreach(['register'=>'注冊賬號', 'resetpass'=>'重置密碼', 'verify'=>'驗證郵箱'] as $type => $title){
$fields[$type] = ['title'=>$title, 'type'=>'fieldset', 'fields'=>[
$type.'_subject' => ['title'=>'標(biāo)題', 'type'=>'text'],
$type.'_message' => ['title'=>'內(nèi)容', 'type'=>'textarea', 'rows'=>3],
]];
}但是感覺這樣重復(fù)的界面非常占用空間，有沒有什么好的優(yōu)化方式，比如折疊起來，點擊展開之后再設(shè)置？
我查了一下，其實無需 Javascript，只需用 HTML 的 summary / details 這兩個標(biāo)簽就能實現(xiàn)。
所以我增強了一下 WPJAM Basic fieldset 組件的能力，fieldset 組件只需要設(shè)定 summary 屬性，就能使用 summary / details 實現(xiàn)折疊展開效果，具體代碼如下：
$fields = [];
foreach(['register'=>'注冊賬號', 'resetpass'=>'重置密碼', 'verify'=>'驗證郵箱'] as $type => $title){
$fields[$type] = ['title'=>$title, 'type'=>'fieldset', 'summary'=>$title.'時郵件設(shè)置', 'fields'=>[
$type.'_subject' => ['title'=>'標(biāo)題', 'type'=>'text'],
$type.'_message' => ['title'=>'內(nèi)容', 'type'=>'textarea', 'rows'=>3],
]];
}相比第一段代碼，這段代碼就是增加了 summary 屬性設(shè)置，最后的效果如下：
默認情況都只顯示摘要，點擊摘要時候，就會展開字段組設(shè)置，如上圖，我點擊了第一個 fieldset 字段組的摘要，「注冊賬號」這個郵件模板就展開了，其他兩個則還是沒有折疊的狀態(tài)。
CSS實現(xiàn)帶炫酷動畫展開折疊效果垂直導(dǎo)航菜單欄，2019必備前端技術(shù) - 一線互聯(lián)網(wǎng)公司大型網(wǎng)站sidebar布局。大型項目核心思路分析，前端布局規(guī)范，代碼規(guī)范，項目規(guī)范，語義規(guī)范，書寫規(guī)范詳細介紹。
ps：推薦一下我的微細公眾號：webqiand，學(xué)習(xí)前端有不懂的（學(xué)習(xí)方法，學(xué)習(xí)路線，如何學(xué)習(xí)有效率的問題）可以關(guān)一下，公眾號有不錯的學(xué)習(xí)教程，開發(fā)工具、電子書籍分享。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>純CSS實現(xiàn)帶炫酷動畫展開折疊效果垂直導(dǎo)航菜單欄</title> <meta name="keywords" content="純CSS,炫酷動畫,展開折疊,效果,垂直導(dǎo)航,菜單欄" /> <meta name="description" content="純CSS實現(xiàn)帶炫酷動畫展開折疊效果垂直導(dǎo)航菜單欄特效。" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="swanky_wrapper"> <input id="Dashboard" name="radio" type="radio"> <label for="Dashboard"> <img src="images/cp.png"> <span>儀表盤</span> <div class="lil_arrow"></div> <div class="bar"></div> <div class="swanky_wrapper__content"> <ul> <a target="_blank"><li>網(wǎng)站首頁</li></a> <a target="_blank"><li>網(wǎng)站模板</li></a> <a target="_blank"><li>網(wǎng)站源碼</li></a> <a target="_blank"><li>視頻教程</li></a> </ul> </div> </label> <input id="Sales" name="radio" type="radio"> <label for="Sales"> <img src="images/del.png"> <span>銷售</span> <div class="lil_arrow"></div> <div class="bar"></div> <div class="swanky_wrapper__content"> <ul> <li>新品</li> <li>過期</li> <li>銷售報告</li> <li>已售</li> </ul> </div> </label> <input id="Messages" name="radio" type="radio"> <label for="Messages"> <img src="images/mess.png"> <span>信息</span> <div class="lil_arrow"></div> <div class="bar"></div> <div class="swanky_wrapper__content"> <ul> <li>收件箱</li> <li>發(fā)件箱</li> <li>發(fā)件</li> <li>存檔</li> </ul> </div> </label> <input id="Users" name="radio" type="radio"> <label for="Users"> <img src="images/users.png"> <span>用戶</span> <div class="lil_arrow"></div> <div class="bar"></div> <div class="swanky_wrapper__content"> <ul> <li>新用戶</li> <li>分組</li> <li>權(quán)限</li> <li>密碼</li> </ul> </div> </label> <input id="Settings" name="radio" type="radio"> <label for="Settings"> <img src="images/set.png"> <span>設(shè)置</span> <div class="lil_arrow"></div> <div class="swanky_wrapper__content"> <ul> <li>數(shù)據(jù)庫</li> <li>設(shè)計</li> <li>更改用戶</li> <li>退出</li> </ul> </div> </label> </div> </body> </html>
需要這個項目css代碼，圖片的可以找我免費領(lǐng)取。如果大家不怕麻煩可以關(guān)注我后私信我“前端學(xué)習(xí)資料”幾個字 找我領(lǐng)取 24小時在線！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
