之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯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实现的动画加载导航的更多相关文章

  1. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  2. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  3. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  4. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  5. 纯css3实现的win8加载动画

    今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  6. 一款纯css3实现的动画按钮

    今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览    ...

  7. 纯CSS3实现loading正在加载。。。

    场景分析:随着我司专职前端切图人员离职,切图的活重新落到我们小组团队成员的日常任务list里面,加上我们小组 7个前端 基本都是后台转的前端 (赶鸭子上架 前端现在需求量大 没办法) 加上自己也将就一 ...

  8. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  9. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

随机推荐

  1. Q1:Valid Parentheses

    Question: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine i ...

  2. vs2017预览版下载

    vs2017预览版,没有限制的不过不能生成生产版本,集成最新的功能! 下载地址: https://www.visualstudio.com/zh-hans/vs/preview/

  3. java随机函数使用方法Random

    import java.util.Random; public class RandomNumber{ public static void main(String[] args) { // 使用ja ...

  4. IBM InfoSphere DataStage 8.1 DataStage Job 开发具体解释

    简单介绍 DataStage 使用了 Client-Server 架构,server端存储全部的项目和元数据,client DataStage Designer 为整个 ETL 过程提供了一个图形化的 ...

  5. iOS开发-Objective-C Block的实现方式

    前言:我们可以把Block当作一个闭包函数,它可以访问外部变量和局部变量,但默认是不可以修改外部变量.你可以使用它来做回调方法,比起使用代理(Delegate)会更加直观.顺带一提,苹果很多的接口(A ...

  6. JMeter学习笔记--详解JMeter配置元件

    JMeter配置元件可以用来初始化默认值和变量,以便后续采样器使用.将在其作用域的初始化阶段处理. CSV Data Set Config:被用来从文件中读取数据,并将它们拆分后存储到变量中,适合处理 ...

  7. Linux时间子系统(十二) periodic tick

    一.tick device概念介绍 1.数据结构 在内核中,使用struct tick_device来抽象系统中的tick设备,如下: struct tick_device {     struct ...

  8. Shell习题100例(2)

    找文件差异 grep -f 选项可以匹配到文件a在文件b中所有相关的行(取a中有b中有的) [root@centos-04 tmp]# vim b.txt vvvv root [root@centos ...

  9. tp查询范围

    一.查询范围 //说明username和password是对应模型下的  scopeUsername($query) 和scopePassword($query)方法 //关键字scope 在控制器如 ...

  10. NodeJS写日志_Log4js使用详解

    今天和大家分享一下NodeJS中写日志的一个常用第三方包:Log4js. 跟随主流Blog特色,先简单介绍下Log4js的基本信息.介绍Log4js之前,需要先说一下Log4***,Log4***是由 ...