纯CSS3炫酷手机APP滑动菜单动画特效
简要教程 这是一款非常时尚的纯CSS3炫酷手机APP滑动菜单动画特效。该特效中当鼠标移动到手机界面上时，菜单图标会逐个滑动显示出来。当鼠标移动到菜单区域会出现一个非常酷的半圆形扩展动画，同时菜单文字将逐一展现出来。 复制代码 复制代码 在鼠标滑过的时候在将这个菜单列表移回屏幕之中。 复制代码 每个菜单项都通过nth-child旋转器来选择然后添加延迟时间。 复制代码 半透明的遮罩层使用social元素的:after伪元素来制作 复制代码 在鼠标滑过屏幕上方的header元素时将移动它的left属性，制作动画效果。 复制代码 本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/css3/daohangcaidan/201507072184.html
查看演示 下载插件
制作方法
HTML结构该手机滑动菜单动画特效的主要部分是菜单图标和菜单项的展示。这里使用一个嵌套<div> 结构，菜单项有超链接<a>元素来制作。
- <div class="social">
- <div class="list">
- <a href="#" data-title="Facebook"><i class="fa fa-facebook"></i></a>
- <a href="#" data-title="Twitter"><i class="fa fa-twitter"></i></a>
- <a href="#" data-title="Dribbble"><i class="fa fa-dribbble"></i></a>
- <a href="#" data-title="Pinterest"><i class="fa fa-pinterest"></i></a>
- <a href="#" data-title="Codepen"><i class="fa fa-codepen"></i></a>
- </div>
- </div>
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;
- }
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
