整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
种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 href="https://blog.csdn.net/qq_45252721" target="_blank"><li>网站首页</li></a> <a href="https://blog.csdn.net/qq_45252721" target="_blank"><li>网站模板</li></a> <a href="https://blog.csdn.net/qq_45252721" target="_blank"><li>网站源码</li></a> <a href="https://blog.csdn.net/qq_45252721" 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小时内与您取得联系。
