简要教程 这是一款非常时尚的纯CSS3炫酷手机APP滑动菜单动画特效。该特效中当鼠标移动到手机界面上时，菜单图标会逐个滑动显示出来。当鼠标移动到菜单区域会出现一个非常酷的半圆形扩展动画，同时菜单文字将逐一展现出来。
查看演示 下载插件 制作方法 HTML结构该手机滑动菜单动画特效的主要部分是菜单图标和菜单项的展示。这里使用一个嵌套 复制代码
CSS样式 开始的时候，菜单使用right: -10px;隐藏起来。- .fresh-ui .header .social .list {
- right: -10px;
- z-index: 999;
- position: absolute;
- }
- .fresh-ui:hover .header .social .list {
- right: 15px;
- }
- .fresh-ui:hover .header .social .list a {
- -webkit-transform: translateX(-15px);
- -ms-transform: translateX(-15px);
- transform: translateX(-15px);
- }
- .fresh-ui .header .social .list a:nth-child(1),
- .fresh-ui .header .social .list a:nth-child(1):before {
- -webkit-transition-duration: .1s;
- transition-duration: .1s;
- }
- ...
- .fresh-ui .header .social:after {
- top: 0;
- left: 150px;
- content: '';
- width: 300px;
- height: 260px;
- position: absolute;
- background: rgba(0, 0, 0, .5);
- border-top-left-radius: 50%;
- border-bottom-left-radius: 50%;
- -webkit-transition: all .35s ease-in-out 0s;
- transition: all .35s ease-in-out 0s;
- }
- .fresh-ui .header:hover .social:after {
- left: -150px;
- }
| 
注册
登录
