轮播的实现

轮播效果:

hover的时候过度改变图标。

实现方法： 对a标签添加两个伪类:before,:after，inline-block,使用content:' ' 占位，给两个伪类添加背景图片。

 <div class="header-logo">
     <a href="/#/index"  ></a>
 </div>

CSS:

.header-logo{
         display: inline-block;
         width:55px;
         height: 55px;
         background-color: $colorA;
         // 用伪类设置两张图片
         a{
           display: inline-block;
           width: 110px;
           height: 55px;
           &:before{
            //  占位
            content: '';
            display:  inline-block;
            width: 55px;
            height: 55px;
            background:url('/imgs/mi-logo.png') no-repeat center;
            background-size: 55px;
            transition: margin .2s;
           }
           &:after{
            //  占位
            content: '';
            display:  inline-block;
            width: 55px;
            height: 55px;
            background:url('/imgs/mi-home.png') no-repeat center;
            background-size: 55px;
           }
            &:hover:before{
              margin-left: -55px;
              transition: margin .2s;
            }
         }