html导航动画,一款纯css3实现的动画加载导航

今天为给大家再带来一款纯css3实现的动画加载导航。该导航出现的时候以动画的形式出现。效果图如下：

html代码：

复制代码代码如下:

• Home

• About Us

• Another Link

• class="main-menu-item">And another

• href="#">Stuff

• Help

• 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;

}