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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
html5表单的required属性使用
Jul 07 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
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python调用百度语音识别api
2018/08/30 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
标记环介质访问控制协议
2016/03/27 面试题
销售工作岗位职责
2013/12/24 职场文书
干部现实表现材料
2014/02/13 职场文书
运动会通讯稿150字
2014/02/15 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers