星空网 > 软件开发 > 网页设计

15种移动手机APP打开菜单过渡动画特效

这是一组移动手机(Mobile)APP打开菜单时的过渡动画特效。这组过渡动画共有15种效果,分别使用CSS3 animation动画来制作,这些动画均由线条和文字组成,效果非常炫酷。

这15种移动手机APP打开菜单动画效果所需的CSS动画样式都写在各自的页面中,同时使用少量的JavaScript代码来为元素切换相应的class类。

 使用方法

 HTML结构

所有的例子都使用相同的HTML结构:其中,.mobile-inner-header-icon是汉堡包图标,.mobile-inner-header-icon-out class类用于制作图标的动画效果。两个空的<span>元素用于制作汉堡包图标的线条。

<div class="mobile">   <div class="mobile-inner">     <div class="mobile-inner-header">      <div class="mobile-inner-header-icon mobile-inner-header-icon-out">       <span></span><span></span>      </div>     </div>     <div class="mobile-inner-nav">      <a href="#">Home</a>      <a href="#">Services</a>      <a href="#">Portfolio</a>      <a href="#">Blog</a>      <a href="#">About</a>      <a href="#">Contact</a>     </div>     <img src='/images/loading.gif' data-original="_assets/photo1.jpg"/>     <p>......</p>      <p>......</p>    </div>   </div> </div></div>       

 CSS样式

以第一种动画的CSS样式为例子,在第一种APP导航菜单特效中,首先为导航项添加一些通用的样式:

.mobile-inner-nav a{ display: inline-block; line-height: 50px; text-decoration: none; width: 80%; margin-left: 10%; color: #FFFFFF; border-bottom: solid 1px rgba(255,255,255,0.3); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; font-weight:300;}.mobile-inner-nav a:hover{ color: rgba(255,255,255,0.4); border-bottom: solid 1px rgba(255,255,255,0.2);}      

在线预览    源码下载




原标题:15种移动手机APP打开菜单过渡动画特效

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

星星跨境电商:https://www.goluckyvip.com/tag/44250.html
星邮供应链:https://www.goluckyvip.com/tag/44251.html
星卓越海外仓:https://www.goluckyvip.com/tag/44252.html
形式发票:https://www.goluckyvip.com/tag/44253.html
兴城市凫水泳装厂:https://www.goluckyvip.com/tag/44255.html
兴和瑞源:https://www.goluckyvip.com/tag/44256.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流