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