一款纯css3实现的动画加载导航
之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航。该导航出现的时候以动画的形式出现。效果图如下:
实现的代码。
html代码:
<ul class="main-menu">
<li class="main-menu-item active"><a href="#">Home</a></li><li class="main-menu-item">
<a href="#">About Us</a></li><li class="main-menu-item"><a href="#">Another Link</a></li><li
class="main-menu-item"><a href="#">And another</a></li><li class="main-menu-item"><a
href="#">Stuff</a></li><li class="main-menu-item"><a href="#">Help</a></li><li class="main-menu-item">
<a href="#">Contact</a></li></ul>
css代码:
*, *:after, *:before {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:;
padding:;
} html, body {
background: #f0f0f0;
font-family: Helvetica, sans-serif;
height: 100%;
} .main-menu {
margin: auto;
width: 960px;
text-align: center;
position: relative;
list-style-type: none;
margin-top: 2em;
} .main-menu::after,
.main-menu-item.active::after {
content: '';
display: inline-block;
position: absolute;
} .main-menu::after {
width: 70%;
height: 2px;
background: #9B1C27;
-webkit-animation: menuLine 1s ease forwards;
animation: menuLine 1s ease forwards;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
bottom:;
left:;
right:;
margin: auto;
opacity:;
} @-webkit-keyframes menuLine {
to {
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity:;
}
} @keyframes menuLine {
to {
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity:;
}
}
@-webkit-keyframes menuItem {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity:;
}
}
@keyframes menuItem {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity:;
}
}
.main-menu-item a {
display: block;
padding: 1em;
text-decoration: none;
color: #555;
opacity:;
-webkit-transform: translateY(40%);
-ms-transform: translateY(40%);
transform: translateY(40%);
-webkit-animation: menuItem .8s ease forwards;
animation: menuItem .8s ease forwards;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.main-menu-item:nth-child(4) a {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.main-menu-item:nth-child(3) a, .main-menu-item:nth-child(5) a {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.main-menu-item:nth-child(2) a, .main-menu-item:nth-child(6) a {
-webkit-animation-delay: .6s;
animation-delay: .6s;
}
.main-menu-item:nth-child(1) a, .main-menu-item:nth-child(7) a {
-webkit-animation-delay: .7s;
animation-delay: .7s;
} .main-menu-item {
display: inline-block;
position: relative;
}
.main-menu-item:hover a, .main-menu-item.active {
color: #9B1C27;
}
.main-menu-item:hover a::after, .main-menu-item.active::after {
width:;
height:;
border-bottom: .5em solid #9B1C27;
border-left: .5em solid transparent;
border-right: .5em solid transparent;
bottom:;
left:;
right:;
margin: auto;
opacity:;
-webkit-transform: translateY(0.05em);
-ms-transform: translateY(0.05em);
transform: translateY(0.05em);
-webkit-animation: menuItem .8s 1.2s ease forwards;
animation: menuItem .8s 1.2s ease forwards;
}
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/7913
一款纯css3实现的动画加载导航的更多相关文章
- 纯css3实现的动画加载条
之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...
- 纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wrap& ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
- 纯css3实现的win8加载动画
今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 纯CSS3实现loading正在加载。。。
场景分析:随着我司专职前端切图人员离职,切图的活重新落到我们小组团队成员的日常任务list里面,加上我们小组 7个前端 基本都是后台转的前端 (赶鸭子上架 前端现在需求量大 没办法) 加上自己也将就一 ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!
关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦ 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用
随机推荐
- Mysql的批量导入类 MySqlBulkLoader
在mssqlserver 中 对应的SqlBuckCopy类,进行批量数据插入. 在mysql 中,官方提供了MySqlBulkLoader 平行的工具: 不过里面有坑,具体坑是插入空值列 NULL的 ...
- 掀开图片显示介绍的css效果
概述 主要运用到CSS3的3D transform等变换 详细 代码下载:http://www.demodashi.com/demo/10575.html 一.概述 1.主要运用到CSS3的3D tr ...
- 首页设计的可用性和PET
网站的首页是一个让人头疼的东西.有时它看起来很简单:首页就是网站内容的整合,一个产品经理随便从网站里拿点东西出来,就能堆出一个看上去靠谱的首页.也正因此,它往往非常麻烦:很多人都可以发表自己的见解,而 ...
- cxGrid显示行号
定义一个类: TMyCxGrid = class(TObject) class procedure DrawIndicatorCell( Sender: TcxGridTableView; ACanv ...
- 利用Microsoft VC++6.0 的MFC 的绘图工具实现简单图形的绘制
MFC运算功能强大,拥有完备的绘图功能. 在Windows平台上,应用程序的图形设备接口(graphics device interface,GDI)被抽象为设备上下文(Dev ...
- Linux安装JDK详细步骤(rpm方式)
1. 先从网上下载jdk(jdk-6u32-linux-i586-rpm) ,下载后放在/home目录中,当然其它地方也行. 进入安装目录 #cd /home#cp jdk-6u32-linux-i5 ...
- 修改Excel默认模版(启动模版和新建Sheet模版)
Office 2013 1. C:\Windows\ShellNew\EXCEL12.XLSX 设置好格式后另存为, 然后复制过来覆盖掉,如果覆盖不了,注意修改所有者权限 2. 新建文件保存为模版文 ...
- jenkins 发送邮件失败
jenkins 配置发送邮件,发送测试邮件,邮件发送失败: Failed to send out e-mail javax.mail.MessagingException: Could not con ...
- Excel中不常用的一些公式用法
INDIRECT函数 http://baike.baidu.com/view/3222185.htm 用于使用单元格内容拼凑公式的情况. 1.采用 [工作表名]!单元格名 的形式读取内容: 2.所 ...
- 用VIM打造C语言编写器
1.先用vim --version命令查看一下都是安装了那些vim特性,以及版本等等情况. vim --version VIM - Vi IMproved 7.4 (2013 Aug 10, comp ...