一款纯css3实现的动画加载导航_ Div+Css教程-查字典教程网
一款纯css3实现的动画加载导航
一款纯css3实现的动画加载导航
发布时间:2016-12-27 来源:查字典编辑
摘要:今天为给大家再带来一款纯css3实现的动画加载导航。该导航出现的时候以动画的形式出现。效果图如下:html代码:HomeAboutUsAno...

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

html代码:

<ul>

<li><a href="#">Home</a></li><li>

<a href="#">About Us</a></li><li><a href="#">Another Link</a></li><li

><a href="#">And another</a></li><li><a

href="#">Stuff</a></li><li><a href="#">Help</a></li><li>

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

}

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