一款纯css3实现的动画加载导航
一款纯css3实现的动画加载导航
发布时间:2015-05-12 来源:查字典编辑
摘要:html代码:代码如下:HomeAboutUsAnotherLinkliAndanotherahref="#"StuffHelpContac...

html代码:

代码如下:

Home

About Us

Another Link

li

And another

a

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;

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类