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

最新推荐文章于 2022-12-15 14:38:50 发布

转载最新推荐文章于 2022-12-15 14:38:50 发布 · 124 阅读

本文介绍了一款使用纯CSS3实现的带有动画效果的导航菜单。该导航菜单在出现时会以动画形式展开，所有菜单项依次淡入并平移至正确位置。通过巧妙运用CSS3的动画和变形特性，实现了优雅且吸引人的用户体验。

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