初入前端，跟着B站的Pink老师学习了一段时间。在Pink老师讲到过渡效果那一课的时候，留下了一个小米Logo效果的课堂小案例。课后自己也动手做了个类似的效果，分享在这里与各位大佬和像我这样的萌新共同交流，共同进步。 这也是我的第一篇博客，记录我的前端学习之路。平时我会把自己在学习中获得的一些经验，方法以及遇到的一些坑之类的，总结下来放到博客中，与大家一起交流。 废话不多说，直接进入正文

图片比文字带劲，先上图，看效果。感觉有点德芙的味道，纵享丝滑

先去小米官网把两张logo素材爬下来。

首先准备一个大div盒子，参照小米的写法，利用伪元素选择器，伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化了HTML结构。

理论模型如下图所示 before和after两个伪元素并排放置在div盒子中。其中after伪元素利用margin-left，将盒子的左外边距缩小至紧贴第一个伪元素盒子，从而使两个盒子并排放置。实际的伪元素为行内元素，需要通过display: block;转化后，使其盒子大小与div盒子保持一致，div盒子大小即为logo大小。在这里为了方便解释，所以模型图中的伪元素盒子画的较小。

当我们的鼠标经过div中的logo时，利用hover伪类选择器，将before伪元素的左侧外边距撑大，同时将after伪元素的左侧外边距缩小。同时结合过渡效果，实现顺滑移动效果。

在测试代码的时候，遇到一个当时一时没能解决的问题。发现logo向左向右移动的时候会有bug。向左移动时，要经过一段距离才能取消移动效果，向右移动的时候极其不稳定，效果如下所示。经过一通分析，发现before伪元素在扩大左侧外边距时，被挤到了div的右侧，但盒子仍然存在，所以鼠标依旧是hover的状态，故要移动一段距离。向右移动出现的bug原理类似。

再一通分析后发现，只要将超出div盒子的内容全部隐藏，就能很好的解决这个问题。下面这行代码就能很好地解决超出盒子边界的问题。

同时这条代码也有很多妙用，以后单独再出一期，分享overflow:hidden在实际小案例中的巧妙运用。

代码如下：

这次的小案例，是对伪元素，过渡效果以及overflow的灵活运用。同时让我对css的实际应用有了更进一步的了解。在学会基础的同时，更得学会如何灵活运用。好了，这次的小米logo案例小分享就到这了。万事开头难，坚持就是胜利，各位一起加油！