一款纯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 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php递归实现无限分类的方法
2015/07/28 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
javascript完美拖拽的实现方法
2013/09/29 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python的Django框架安装全攻略
2015/07/15 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python调用c++传递数组的实例
2019/02/13 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python线程优先级队列知识点总结
2021/02/28 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
绿化工程实施方案
2014/03/17 职场文书
联欢晚会主持词
2014/03/25 职场文书
优秀护士演讲稿
2014/04/30 职场文书
优质服务活动实施方案
2014/05/02 职场文书
学校运动会广播稿
2014/10/11 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis