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的新特性介绍
Oct 31 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 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 HTML代码串截取代码
2008/12/29 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
javascript实现简单留言板案例
2021/02/09 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
python自动格式化json文件的方法
2015/03/11 Python
Python将图片转换为字符画的方法
2020/06/16 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python中logging实例讲解
2019/01/17 Python
Python中SQLite如何使用
2020/05/27 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
上班迟到检讨书
2014/01/10 职场文书
2014年端午节活动方案
2014/03/11 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
个人先进事迹总结
2015/02/26 职场文书
匿名检举信范文
2015/03/02 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python