css 动态线条制作方案

 

• 利用 :before   or    :after  在元素中添加线条样式；
• 设置样式的过渡效果属性值；
• 改变width，left，transform等属性值，设置鼠标移入：hover 效果；

  li:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -2px;
      width: 100%;
      opacity: 0;
      border-bottom: 2px solid #646464;
      transform: translate(-50%) scaleX(0);
      -webkit-transform: translate(-50%) scaleX(0);
      -moz-transform: translate(-50%) scaleX(0);
      -o-transform: translate(-50%) scaleX(0);
      -ms-transform: translate(-50%) scaleX(0)
  }
  li:after {
      transition: .2s ease-in-out;
      -webkit-transition: .2s ease-in-out;
      -moz-transition: .2s ease-in-out;
      -o-transition: .2s ease-in-out;
      -ms-transition: .2s ease-in-out
  }
  li:hover:after {
      opacity: 1;
      transform: translate(-50%) scaleX(1);
      -webkit-transform: translate(-50%) scaleX(1);
      -moz-transform: translate(-50%) scaleX(1);
      -o-transform: translate(-50%) scaleX(1);
      -ms-transform: translate(-50%) scaleX(1)
  }

  通过改变opacity 和transform的scsleX值，产生变化