仿小米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;
同时改削一下通明度；
当鼠标移出的时辰 ，两个伪元素的盒子会恢复初始的外形 ，然后我们在两个伪元素盒子里面设置了过渡 ，所以它们就会以动画的编制恢复到初始职位 。