用css3实现的动画加载导航

这篇文章主要讲解了“用css3实现的动画加载导航”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“用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: 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;}

感谢各位的阅读，以上就是“用css3实现的动画加载导航”的内容了，经过本文的学习后，相信大家对用css3实现的动画加载导航这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是恰卡编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！