使用CSS 中伪元素:before 和:after 做简单的动画（以小米商城非首页 logo 动画为例）

刚开始学前端不久，发现小米商城的页面做的特别漂亮，前几天在B站找了一个视频，是闪购页面的，跟上做了一下，但是他的视频只有静态的基本页面，没有动画，我今天弄了小半天（还是技术太差，哈哈哈），终于算是做出来了，而且效果和小米商城的一模一样。

先看效果

---

原理是这样的

在小米logo图片的左边插入一个房子的图片，当鼠标经过的时候，给他们设置 transform 动画就可以了，只是这里还有一个要注意的是透明的的问题，我们后面再说。

---

直接看代码解释

HTML部分

<a class="logo ir" href="//www.mi.com/index.html" title="小米官网">小米官网</a>

对，就这么一句
logo类就是为了方便设置图片的，ir类是为了设置 <a> 标签内部文字的

CSS部分

.header-log .logo {
    position: relative;
    display: block;
    width: 55px;
    height: 55px;
    overflow: hidden;
    background-color: #ff6700;
}
.header-log .ir {
    text-align: left;
    text-indent: -9999em;      /*当CSS能加载出来，这个是看不见的，当只有HTML加载出来，这个文字是可以看到的*/
}
.header-log .logo::before, .header-log .logo::after {
    position: absolute;        /*绝对定位*/
    left: 0;
    top: 0;
    z-index: 1;                /*设置层级，相当于PS中的图层，越小越靠下*/
    width: 55px;
    height: 55px;
    content: '';                /*用来插入东西的，这里必须为空，这个经常和 :before 及 :after 伪元素配合使用*/
    transform-origin: 50% 50%;
    transition: all .2s;        /*设置动画*/
}
.header-log .logo::before {
    background: url(../img/mi-logo.png) no-repeat 50% 50%;
    opacity: 1;                /*透明的，1为完全不透明，0为完全透明*/
    transform: translate(0, 0);
}
.header-log .logo::after {
    background: url(../img/mi-home.png) no-repeat 50% 50%;
    opacity: 0;                 /*因为这张图片是在左边的，要设置成完全透明的*/
    margin-left: -55px;         /*放在左边看不到的地方*/
    transform: translate(0, 0);
}
.logo:hover::before{            /*鼠标经过事件，小米logo变透明，向右移动*/
    opacity: 0;
    transform: translateX(55px);
}
.logo:hover::after{              /*鼠标经过事件，首页图标变不透明，向右移动*/
    opacity: 1;
    transform: translateX(55px);
}

注意

1. <a> 标签 position 一定要是 relative
2. 对 <a> 标签设置 display 为 block ，去掉标签固有属性也很重要
3. 图片是在CSS中引入，首页图片的处理办法（左移加完全透明）
4. 动画的实现（图片位置的变化，透明度的变化）

这样，小米商城非首页的logo动画就完成了，也多了对 :befor 和 :after 这两个伪元素的使用技能

---