采用过渡、定位 制作 小米 logo制作案例

1. 题目描述
   
   当鼠标移入到logo上的时候，左侧会滑出一个小房子，当鼠标移出logo的时候，恢复成原来的样子，并且中间的切换是有动画的

2. 实现思路
   （1）设置一个盒子的大小和logo图片的大小一样
   （2）再给盒子加伪元素 before 和after
   （3）给两个伪元素添加定位，使home图片的盒子位于盒子的右边
   （4）谁过渡给谁加。两个伪元素都要过渡，两个都加
   （5）采用hover的时候盒子移动

3. 实现代码
   （1）HTML

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

(2)CSS

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      .logo {
        position: relative;
        margin: 100px auto;
        width: 49px;
        height: 49px;
        line-height: 100px;
        background-color: #ff6700;
      }
      .logo::before {
        content: "";
        position: absolute;
        width: 49px;
        height: 49px;
        background: url(images/mi-logo.png) no-repeat center;
      }
      .logo::after {
        content: "";
        position: absolute;
        top: 0;
        left: 49px;
        width: 49px;
        height: 49px;
        transition: all 0.5s;
        background: url(images/mi-home.png) no-repeat right;
      }
      .logo:hover::after {
        left: 0;
      }
      .logo:hover::before {
        left: -49px;
      }