css伪元素实现小米商城顶部图标切换

小米商城顶部header图标效果：点击查看效果

描述：鼠标划上，换成home图标，

思路：使用before和after伪元素设置图片，鼠标hover时改变margin值；

html：

<div class="logo"></div>

css:

.logo {
    position: relative;
    width: 55px;
    height: 55px;
    background: #ff6700; 
    overflow: hidden;
}
.logo::before,.logo::after {
    position: absolute;
    top: 0; 
    left: 0;
    content: "";
    width: 55px;
    height: 55px;
    background-origin: 50% 50%;
    transition: all 0.2s;
    z-index: 1;
}
.logo::before {
    background: url(https://s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat 50% 50%;
    opacity: 1; 
}
.logo::after {
    background: url(https://s02.mifile.cn/assets/static/image/mi-home.png) no-repeat 50% 50%;
    margin-left: -55px;
    opacity: 0; 
}
.logo:hover::before {
    margin-left: 55px;
    opacity: 0;
}
.logo:hover::after {
    margin-left: 0;
    opacity: 1;
}