简要教程

这是一款CSS3炫酷鼠标hover菜单动画特效。该特效中，当用户鼠标hover菜单项时，在菜单项底部会出现一条动画的波浪线，效果非常炫酷。

 使用方法

在页面中引入style.css文件。

<script src="js/style.js"></script>

 初始化插件

使用<nav>元素来制作一个导航菜单，HTML结构如下：

js版本：

<nav>
  <ul>
    <li><a href="#!">首页</a></li>
    <li><a href="#!">关于我们</a></li>
    <li><a href="#!">联系我们</a></li>
    <li><a href="#!">常见问题</a></li>
  </ul>
</nav>

 CSS样式

这个线条动画实际上是利用背景图片来制作的。在鼠标hover菜单项时，通过不断修改背景图片的位置，形成线条左波浪运动的效果。

.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 720px;
  margin: 0 auto;
  height: 70vh;
  list-style: none;
}
 
.menu li {
  width: 125px;
  height: 50px;
  -webkit-transition: background-position-x 0.9s linear;
  transition: background-position-x 0.9s linear;
  text-align: center;
}
.menu li a {
  font-size: 28px;
  color: #777;
  text-decoration: none;
  -webkit-transition: all 0.45s;
  transition: all 0.45s;
}
.menu li:hover {
  /* 这里是一张波浪线条的背景图片 */
  background: url("data:image/svg+xml;......");
  /* 通过line动画不断修改背景图片的位置 */
  -webkit-animation: line 1s;
          animation: line 1s;
}
.menu li:hover a {
  color: #d94f5c;
}
.menu li:not(:last-child) {
  margin-right: 30px;
}
 
@-webkit-keyframes line {
  0% {
    background-position-x: 390px;
  }
}
 
@keyframes line {
  0% {
    background-position-x: 390px;
  }
}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！