一款纯css3实现的动画加载导航_html/css_WEB-ITnose
程序员文章站
2022-04-26 12:35:02
...
之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航。该导航出现的时候以动画的形式出现。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
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;}