非常酷的CSS3垂直下拉动画菜单
2014-04-20 11:12
447 查看
昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果。下面是效果图,一起看看。
我们也可以在这里查看菜单DEMO演示。
下面来分析一下源代码,首先是HTML代码:
这里用ul构造了菜单的基本结构。
接下来就利用CSS3代码来实现菜单的下拉和动画效果。
CSS代码比较繁琐,这里我只是提供一些核心的CSS代码,完整的代码大家可以在文章最后下载学习。
这是鼠标滑过菜单项时的动画代码:
以下定义了鼠标滑过后文字图标滑过的动画,分别是从顶部划入,从左侧划入,从右侧划入:
最后,把源代码分享一下,下载地址>>
我们也可以在这里查看菜单DEMO演示。
下面来分析一下源代码,首先是HTML代码:
<nav> <ul class="mcd-menu"> <li> <a href=""> <i class="fa fa-home"></i> <strong>Home</strong> <small>sweet home</small> </a> </li> <li> <a href="" class="active"> <i class="fa fa-edit"></i> <strong>About us</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-gift"></i> <strong>Features</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-globe"></i> <strong>News</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-comments-o"></i> <strong>Blog</strong> <small>what they say</small> </a> <ul> <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li> <li> <a href="#"><i class="fa fa-group"></i>Our Team</a> <ul> <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li> <li> <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a> <ul> <li><a href="#"><i class="fa fa-leaf"></i>About</a></li> <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li> </ul> </li> <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li> </ul> </li> <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li> <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li> </ul> </li> <li> <a href=""> <i class="fa fa-picture-o"></i> <strong>Portfolio</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-envelope-o"></i> <strong>Contacts</strong> <small>drop a line</small> </a> </li> <li class="float"> <a class="search"> <input type="text" value="search ..."> <button><i class="fa fa-search"></i></button> </a> <a href="" class="search-mobile"> <i class="fa fa-search"></i> </a> </li> </ul> </nav>
这里用ul构造了菜单的基本结构。
接下来就利用CSS3代码来实现菜单的下拉和动画效果。
CSS代码比较繁琐,这里我只是提供一些核心的CSS代码,完整的代码大家可以在文章最后下载学习。
这是鼠标滑过菜单项时的动画代码:
.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small { position: relative; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; } .mcd-menu li:hover > a i { opacity: 1; -webkit-animation: moveFromTop 300ms ease-in-out; -moz-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out; -o-animation: moveFromTop 300ms ease-in-out; animation: moveFromTop 300ms ease-in-out; } .mcd-menu li:hover a strong { opacity: 1; -webkit-animation: moveFromLeft 300ms ease-in-out; -moz-animation: moveFromLeft 300ms ease-in-out; -ms-animation: moveFromLeft 300ms ease-in-out; -o-animation: moveFromLeft 300ms ease-in-out; animation: moveFromLeft 300ms ease-in-out; } .mcd-menu li:hover a small { opacity: 1; -webkit-animation: moveFromRight 300ms ease-in-out; -moz-animation: moveFromRight 300ms ease-in-out; -ms-animation: moveFromRight 300ms ease-in-out; -o-animation: moveFromRight 300ms ease-in-out; animation: moveFromRight 300ms ease-in-out; } .mcd-menu li:hover > a { color: #e67e22; }
以下定义了鼠标滑过后文字图标滑过的动画,分别是从顶部划入,从左侧划入,从右侧划入:
@-webkit-keyframes moveFromTop { from { opacity: 0; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } to { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes moveFromLeft { from { opacity: 0; -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes moveFromRight { from { opacity: 0; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } }
最后,把源代码分享一下,下载地址>>
相关文章推荐
- css3实现垂直下拉动画菜单示例
- 非常炫酷的CSS3垂直手风琴菜单
- 一款非常炫酷的CSS3垂直手风琴菜单
- css3动画垂直翻转180度
- 纯css3开发的响应式设计动画菜单(支持ie8)
- JavaScript实现动态下拉收起菜单+css实现动画效果
- CSS3实现的简单下拉框菜单
- 基于CSS3制作的鼠标悬停动画菜单
- 通过css3实现的动画导航菜单代码
- H5+CSS3实现简单菜单下划线动画
- 简易CSS3 Tab菜单 Tab切换滑块动画
- 非常轻量级的下拉筛选菜单ZBDownMenuView
- Android 上滑弹性动画+下拉放大图像+淘宝菜单
- CSS3实现银灰色动画效果的导航菜单代码
- jquery垂直弹性下拉二级菜单
- 简易CSS3 Tab菜单 Tab切换滑块动画
- 一组非常喜庆的纯CSS3图标悬停变幻动画
- CSS3transition实现的简单动画菜单
- CSS3简单动画效果与使用列表制作菜单
- CSS3实现的响应式下拉滑动特效菜单