纯CSS3炫酷手机APP滑动菜单动画特效

手机 导航菜单 app 滑动菜单 2015-07-07

控件介绍
这是一款非常时尚的纯CSS3炫酷手机APP滑动菜单动画特效。该特效中当鼠标移动到手机界面上时,菜单图标会逐个滑动显示出来。当鼠标移动到菜单区域会出现一个非常酷的半圆形扩展动画,同时菜单文字将逐一展现出来。
浏览器兼容

支持IE10+

演示下载 3606
使用方法

制作方法

HTML结构

该手机滑动菜单动画特效的主要部分是菜单图标和菜单项的展示。这里使用一个嵌套<div>结构,菜单项有超链接<a>元素来制作。

1
2
3
4
5
6
7
8
9
<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>

手机APP滑动菜单设计

CSS样式

开始的时候,菜单使用right: -10px;隐藏起来。

1
2
3
4
5
.fresh-ui .header .social .list {
  right: -10px;
  z-index: 999;
  position: absolute;
}

在鼠标滑过的时候在将这个菜单列表移回屏幕之中。

1
2
3
4
5
6
7
8
9
.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);
}               

每个菜单项都通过nth-child旋转器来选择然后添加延迟时间。

1
2
3
4
5
6
.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;
}
...               

半透明的遮罩层使用social元素的:after伪元素来制作。

1
2
3
4
5
6
7
8
9
10
11
12
13
.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;
}               

在鼠标滑过屏幕上方的header元素时将移动它的left属性,制作动画效果。

1
2
3
.fresh-ui .header:hover .social:after {
  left: -150px;
}               

本文转载请注明出处:http://www.zhuiye.com/detail_1602.html
评论区
  • 还没有评论,快来抢沙发吧!