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制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
YII框架关联查询操作示例
2019/04/29 PHP
JavaScript操作Cookie详解
2015/02/28 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
用python实现的线程池实例代码
2018/01/06 Python
django页面跳转问题及注意事项
2019/07/18 Python
python 命令行传入参数实现解析
2019/08/30 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
在校大学生的职业生涯规划书
2014/03/14 职场文书
《长征》教学反思
2014/04/27 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
vue实现滑动解锁功能
2022/03/03 Vue.js
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL