查看: 3494|回复: 10

[CSS3导航菜单] 纯CSS3炫酷手机APP滑动菜单动画特效

[复制链接]
发表于 2015-10-8 10:26:19 | 显示全部楼层 |阅读模式
  简要教程

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

  制作方法

  HTML结构

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

  1. <div class="social">
  2.   <div class="list">
  3.     <a href="#" data-title="Facebook"><i class="fa fa-facebook"></i></a>
  4.     <a href="#" data-title="Twitter"><i class="fa fa-twitter"></i></a>
  5.     <a href="#" data-title="Dribbble"><i class="fa fa-dribbble"></i></a>
  6.     <a href="#" data-title="Pinterest"><i class="fa fa-pinterest"></i></a>
  7.     <a href="#" data-title="Codepen"><i class="fa fa-codepen"></i></a>
  8.   </div>
  9. </div>
复制代码
001.jpg


  CSS样式

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

  1. .fresh-ui .header .social .list {
  2.   right: -10px;
  3.   z-index: 999;
  4.   position: absolute;
  5. }
复制代码
  在鼠标滑过的时候在将这个菜单列表移回屏幕之中。
  1. .fresh-ui:hover .header .social .list {
  2.   right: 15px;
  3. }

  4. .fresh-ui:hover .header .social .list a {
  5.   -webkit-transform: translateX(-15px);
  6.   -ms-transform: translateX(-15px);
  7.       transform: translateX(-15px);
  8. }
复制代码
  每个菜单项都通过nth-child旋转器来选择然后添加延迟时间。
  1. .fresh-ui .header .social .list a:nth-child(1),
  2. .fresh-ui .header .social .list a:nth-child(1):before {
  3.   -webkit-transition-duration: .1s;
  4.   transition-duration: .1s;
  5. }
  6. ...   
复制代码
  半透明的遮罩层使用social元素的:after伪元素来制作。
  1. .fresh-ui .header .social:after {
  2.   top: 0;
  3.   left: 150px;
  4.   content: '';
  5.   width: 300px;
  6.   height: 260px;
  7.   position: absolute;
  8.   background: rgba(0, 0, 0, .5);
  9.   border-top-left-radius: 50%;
  10.   border-bottom-left-radius: 50%;
  11.   -webkit-transition: all .35s ease-in-out 0s;
  12.           transition: all .35s ease-in-out 0s;
  13. }
复制代码
  在鼠标滑过屏幕上方的header元素时将移动它的left属性,制作动画效果。
  1. .fresh-ui .header:hover .social:after {
  2.   left: -150px;
  3. }
复制代码
游客,如果您要下载源码或者查看隐藏内容请回复


回复

使用道具 举报

发表于 2015-10-22 12:07:14 | 显示全部楼层
zzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.comzzfriend.com
回复 支持 反对

使用道具 举报

发表于 2015-11-29 17:09:03 | 显示全部楼层
我需要查看这个源码,谢谢。
回复 支持 反对

使用道具 举报

发表于 2016-5-24 22:48:49 手机频道 | 显示全部楼层
这个可以有啊!
回复 支持 反对

使用道具 举报

发表于 2016-11-16 14:05:58 | 显示全部楼层
:lol:lol:lol:lol
回复 支持 反对

使用道具 举报

发表于 2016-12-17 16:24:48 | 显示全部楼层
好看,学习学习,额呵呵呵呵呵
回复 支持 反对

使用道具 举报

发表于 2016-12-20 19:58:11 | 显示全部楼层
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

发表于 2016-12-20 19:58:47 | 显示全部楼层
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

发表于 2017-2-15 10:48:04 | 显示全部楼层
天啦鲁,我的蚂蚁币不够啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



快速回复 返回顶部 返回列表