Heim >Web-Frontend >HTML-Tutorial >一款纯css3实现的动画加载导航_html/css_WEB-ITnose

一款纯css3实现的动画加载导航_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:56:471153Durchsuche

之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯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;}

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn