前言（小白初体验之html和css）

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

废话不多说，直接进入正文

一、实际运行效果

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

二、实际操作

1.素材准备

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

2.理论基础

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

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

选择符	简介
::before	在父元素内容的前面创建元素
::after	在父元素内容的后面创建元素

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

3.掉坑经历分享

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

4.解决bug

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

overflow: hidden;

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

5.完整代码

代码如下：

    <!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Smooth</title><style>.box {width: 55px;height: 55px;margin: 100px auto;overflow: hidden;}.box .logo {display: block;position: relative;width: 100%;height: 100%;background-color: rgb(255, 103, 0);}.box .logo::before,.box .logo::after {position: absolute;left: 0;top: 0;width: 100%;height: 100%;content: "";transition: all .2s;}.box .logo::before {background: url(mi-logo.png) no-repeat 50% 50%;}.box .logo::after {background: url(mi-home.png) no-repeat 50% 50%;margin-left: -55px;}.box .logo:hover::before {margin-left: 55px;}.box .logo:hover::after {margin-left: 0px;}</style>
</head><body><div class="box"><a class="logo" title="小米官网"><!-- 小米官网 --></a></div>
</body></html>

三、总结

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

小白初上手HTML+CSS 仿写小米官网logo动画相关推荐

仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米官网右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
仿写小米官网（登录、注册页面、首页、详情页、购物车）
功能介绍各网页公用功能返回顶部调用jquery的方法实现效果,页面滚动超过任意位置时右侧出现返回顶部按钮,点击后平滑返回顶部注册用户需要填写手机号.昵称.密码且勾选同意协议,如果是合法数据且 ...
html+css仿写NIKE官网静态页面
第一次较完整的网页,没有动画,纯静态,没有调式各种窗口大小,谷歌浏览器缩放90%为正常比例部分效果图 html <!DOCTYPE html> <html lang="e ...
Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页中间部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页产品导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...

小白初上手HTML+CSS 仿写小米官网logo动画

文章目录