之前为大家介绍了好几款导航菜单，今天为给大家再带来一款纯css3实现的动画加载导航。该导航出现的时候以动画的形式出现。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
立即学习“前端免费学习笔记（深入）”；
登录后复制Home About UsAnother LinkAnd anotherStuffHelp Contact
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;}登录后复制
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3092675.html
