一款纯css3实现的动画加载导航


Posted in HTML / CSS onOctober 08, 2014

今天为给大家再带来一款纯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: 0;
padding: 0;
}
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: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0;
}
@-webkit-keyframes menuLine {
to {
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity: 1;
}
}
@keyframes menuLine {
to {
-webkit-transform: scaleX(1);
transform: scaleX(1);
opacity: 1;
}
}
@-webkit-keyframes menuItem {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes menuItem {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.main-menu-item a {
display: block;
padding: 1em;
text-decoration: none;
color: #555;
opacity: 0;
-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: 0;
height: 0;
border-bottom: .5em solid #9B1C27;
border-left: .5em solid transparent;
border-right: .5em solid transparent;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0;
-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;
}
HTML / CSS 相关文章推荐
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
CSS3实现指纹特效代码
Mar 17 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 HTML / CSS
css3 transform属性详解
Sep 30 #HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 #HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 #HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 #HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 #HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 #HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 #HTML / CSS
You might like
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
Javascript学习笔记 delete运算符
2011/09/13 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Python3基础之函数用法
2014/08/13 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
10条PHP编程习惯
2014/05/26 面试题
java程序员面试交流
2012/11/29 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
自我检讨书怎么写
2015/05/07 职场文书
可怜妈妈观后感
2015/06/09 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
浅谈pytorch中的dropout的概率p
2021/05/27 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL