css3实现垂直下拉动画菜单示例


Posted in HTML / CSS onApril 22, 2014

css3实现垂直下拉动画菜单示例

复制代码
代码如下:

<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;
}</p> <p>.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%);
}
}
HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 #HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
You might like
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
javascript常用函数(1)
2015/11/04 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python getopt详解及简单实例
2016/12/30 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
深入了解NumPy 高级索引
2020/07/24 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
销售业务员岗位职责
2014/01/29 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
服务承诺口号
2014/05/22 职场文书
介绍信范文
2015/01/31 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
法制教育主题班会
2015/08/13 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
2019年入党思想汇报
2019/03/25 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL