小米是一家知名的智能手机和电子产品制造商，其网站的设计一直是广大用户所赞赏的。其中，小米首页的Logo动画是网站设计中的一个小亮点，下面我们一起来看看它是如何实现的。

.logo{
position: relative;
overflow: hidden;
width: 184px;
height: 48px;
background: url('../img/logo.png') no-repeat;
background-size: contain;
transition: all 0.15s;
}
.logo:hover{
background-size: 134%;
}
.logo::before{
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
transition: all 0.15s;
transform: rotate(45deg);
}
.logo:hover::before{
width: 100%;
height: 100%;
transition-delay: 0.05s;
}

首先，我们为Logo添加一个类名，设置其宽高和背景图，其中我们添加了overflow: hidden属性，目的是为了让超出部分隐藏。然后，我们设置了一个过渡效果，使Logo在鼠标悬停时，背景图会放大至134%的大小。

接着，我们为Logo的伪元素::before设置了CSS样式。这里使用了CSS3的旋转函数rotate()，将它旋转45度，生成了一个以Logo左上角为原点的斜线。同时，我们设置了边框的宽度和颜色，用于实现斜线的效果。在Logo悬停时，我们让其width和height扩张至100%, 使其完全覆盖到Logo上，并设置了适当的transition-delay属性，以实现一个平滑的过渡效果。

运用以上技巧，小米首页的Logo动画效果得以实现。当鼠标悬停在Logo上时，一条斜线从Logo的左上角缓缓伸展至覆盖整个Logo，看起来非常炫酷。