SOURCE

<header>
<div class="wrapper clearfix">
    <div class="logo">
        <h1>
        		小米官网
            <a href="#" class="milogo"></a>
            <a href="#"class="mihome"></a>
        </h1>
</div>
</header>

.clearfix::before, 
.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

header{
    height: 100px;
    background: lightyellow;
}

.wrapper{
    max-width: 960px;
    margin: 0 auto;
}

header div.logo{
    width: 55px;
    height: 55px;
    /* outline: 1px solid black; */
    position: relative;
    overflow: hidden;
    margin-top: 24px;
   
}
header h1{
   font-size: 0;
}
header a{
  position: absolute;
  width: 55px;
  height: 55px;
  top:0;
  transition: left 0.3s;
}

header a.milogo{
    background-image: url(https://s02.mifile.cn/assets/static/image/logo-mi2.png);
    background-size: cover;
    
}

header a.mihome{
    background-image: url(https://hjd6633.oss-cn-hangzhou.aliyuncs.com/web/2222.png);
    background-size: cover;
    left: -55px;
  
}

header div.logo:hover a.milogo{
  left: 55px;
}
header div.logo:hover a.mihome{
  left: 0;
}