仿小米logo的案例

 操练描摹

当鼠标移进到logo上的时辰
，右边会滑出一个斗室子，案例当鼠标移出logo的案例时辰，恢复成本来的案例容貌 ，并且中心的案例切换是有动画的

操练提示

1. 搭建以项目为主的几个文件

2. 钞缮 logo的页面筹划

   - logo图标的筹划理应是一个div的除夜盒子，里面包裹了a标签

   - 给a标签设置 官网名字，案例可是案例不克不及展如今页面展示（方针是利便搜刮引擎）

   - 给a标签设置before和after两个伪元素，分袂设置不合的案例布景图片

   - 独霸偏移让两个盒子程度列举，让有home房子图片的案例盒子先移出全数除夜盒子

3. 给a标签设置hover义务 ，挪动两个盒子（并且要有动画）

独霸法度圭表类型

1. 正常斥地中 ，案例我们制订logo的案例时辰，起首会先用一个div的案例除夜盒子来包裹 ，然后再div除夜盒子中放一个a标签的案例小盒子（方针在于logo是可以被点击的）

2. 在a标签中要写上 官网的名字
，可是案例这个名字不是给用户看的 ，是案例为了更好的被搜刮引擎搜刮到，所以我们会把这个文字举办湮没

3. 独霸往日所进修到的伪元素，给这个a标签设置 before 和after 两个伪元素，分袂给这两个伪元素设置布景图片

小米官网    

4. 给最除夜的盒子 header-logo 设置绝对定位

.header-logo {      position: relative;   }

5. 给这个 a 标签设置格式
， 类名为logo

 变换展示编制
 ，这是宽高为 55px，设置溢出湮没，设置布景物华（#ff6700），湮没文字（text-indent: -9999em）

.logo {     display: block;    width: 55px;    height: 55px;    overflow: hidden;    background-color: #ff6700;    text-align: left;    text-indent: -9999em;   }

6. 给 a 标签设置 before伪元素

设置尽对定位，左上角对齐
，宽高为 55px，设置布景图片，设置过渡动画
，opacity 通明度为1

/* mi logo的格式 */.logo::before {     /* 定位 */    position: absolute;    /* 伪元素必须求设置content属性 */    content: '';    /* 左偏移 */    left: 0;    /* 上偏移 */    top: 0;    width: 55px;    height: 55px;    /* 设置过渡 */    transition: all .3s;    /* 布景图片 */    background: url(./images/mi-logo.png) no-repeat center center;    /* 通明度 */    opacity: 1;}

7. 给a 标签设置 after 伪元素

 设置尽对定位 ，左上角对齐 ，宽高为 55px ，设置布景图片 ，设置过渡动画，设置margin-left: -55px（刚最早让这个盒子移出全数除夜盒子，等鼠标移进的时辰，可以滑动出往）
，opacity通明度为0

/* mi home 的格式 */.logo::after {     position: absolute;    content: '';    left: 0;    top: 0;    width: 55px;    height: 55px;    transition: all .3s;    background: url(./images/mi-home.png) no-repeat center center;    margin-left: -55px;    opacity: 0;}

8. 给最除夜的盒子设置鼠标移进义务

当鼠标移进的时辰  ，before盒子理应往右边举办偏移，偏移出全数除夜盒子，设置margin-left 为正值

当鼠标移进的时辰 ，after盒子理应往右边举办偏移，偏移到除夜盒子的中心，设置margin-left: 0;

同时改削一下通明度；

当鼠标移出的时辰 ，两个伪元素的盒子会恢复初始的外形
，然后我们在两个伪元素盒子里面设置了过渡 ，所以它们就会以动画的编制恢复到初始职位 。