首页 > 代码库 > 一款纯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;}
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/7913
一款纯css3实现的动画加载导航
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。