转载

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

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

纯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>
复制代码

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

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. }
  5. .fresh-ui:hover .header .social .list a {
  6.   -webkit-transform: translateX(-15px);
  7.   -ms-transform: translateX(-15px);
  8.       transform: translateX(-15px);
  9. }           
复制代码
每个菜单项都通过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. }  
复制代码
本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/css3/daohangcaidan/201507072184.html
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 springcloud-demo Redis教程 Spring教程 Git教程 openfire参考指南 Jenkins进阶系列 Java设计模式 HBase教程 java-demo Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Ant教程 java实例教程 Hive教程 SpringCloud ANTLR教程 XStream教程 Elastic-Job-Lite Hazelcast教程 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 SaaS MVP：从0到1的功能闭环设计指南
  2. 2 从0到1可执行的“出海型SaaS最佳MVP路径
  3. 3 用 Comet，让你的每一个问题都得到更好的答案
  4. 4 Toolhub — 一个干净实用的在线工具集合
  5. 5 又学一招：Excel 数据对比及 VBA 实现方案
  6. 6 EasyExcel 读取数值精度丢失问题与解决方案
  7. 7 mongodb重命名和创建索引
  8. 8 WordPress 删除尚未附加的图片：优化网站存储空间的实用指南
  9. 9 OVHcloud 美区购买服务器指南
  10. 10 拿到兑换码后，如何在腾讯 EdgeOne 控制台兑换、接入并体验 CDN 加速？
网站信息
  • 文章总数：82,782 篇
  • 文件总数：210,940 个
  • 标签总数：2,449 个
  • 分类总数：86 个
  • 留言数量：2,584 条
  • 在线人数：658 人
  • 运行天数：4,755天
  • 最后更新：2025年11月03日20点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG