一款纯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实现的炫酷动画应用
随机推荐
- Q1:Valid Parentheses
Question: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine i ...
- vs2017预览版下载
vs2017预览版,没有限制的不过不能生成生产版本,集成最新的功能! 下载地址: https://www.visualstudio.com/zh-hans/vs/preview/
- java随机函数使用方法Random
import java.util.Random; public class RandomNumber{ public static void main(String[] args) { // 使用ja ...
- IBM InfoSphere DataStage 8.1 DataStage Job 开发具体解释
简单介绍 DataStage 使用了 Client-Server 架构,server端存储全部的项目和元数据,client DataStage Designer 为整个 ETL 过程提供了一个图形化的 ...
- iOS开发-Objective-C Block的实现方式
前言:我们可以把Block当作一个闭包函数,它可以访问外部变量和局部变量,但默认是不可以修改外部变量.你可以使用它来做回调方法,比起使用代理(Delegate)会更加直观.顺带一提,苹果很多的接口(A ...
- JMeter学习笔记--详解JMeter配置元件
JMeter配置元件可以用来初始化默认值和变量,以便后续采样器使用.将在其作用域的初始化阶段处理. CSV Data Set Config:被用来从文件中读取数据,并将它们拆分后存储到变量中,适合处理 ...
- Linux时间子系统(十二) periodic tick
一.tick device概念介绍 1.数据结构 在内核中,使用struct tick_device来抽象系统中的tick设备,如下: struct tick_device { struct ...
- Shell习题100例(2)
找文件差异 grep -f 选项可以匹配到文件a在文件b中所有相关的行(取a中有b中有的) [root@centos-04 tmp]# vim b.txt vvvv root [root@centos ...
- tp查询范围
一.查询范围 //说明username和password是对应模型下的 scopeUsername($query) 和scopePassword($query)方法 //关键字scope 在控制器如 ...
- NodeJS写日志_Log4js使用详解
今天和大家分享一下NodeJS中写日志的一个常用第三方包:Log4js. 跟随主流Blog特色,先简单介绍下Log4js的基本信息.介绍Log4js之前,需要先说一下Log4***,Log4***是由 ...