小米是一家知名的智能手機和電子產品制造商，其網站的設計一直是廣大用戶所贊賞的。其中，小米首頁的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，看起來非常炫酷。