之前不少人提過說要實現像阿里百秀Logo那樣的動畫效果，為了滿足廣大用戶的需求，這里就簡單做個演示。東西相對較簡單，所以不要認為你搞不定它。

下面是案例代碼

.imlogo{

display: block;

width: 160px;

height: 80px;

background: #FF5E52 url(https://themebetter.com/uploads/2015/01/logo2.png) center 22px no-repeat;

-webkit-transition: background-position linear .2s;

-moz-transition: background-position linear .2s;

transition: background-position linear .2s;

}

.imlogo:hover{

background-position: center -48px;

}

其實你只需要改變其中的圖片地址、Logo區域大小(160px和80px)背景圖的坐標(22px和-48px)，你就能實現自己的動畫了，如果你很懶，那就做個119*100px的logo即可，像下面這樣的一張圖(背景做成透明的，png格式，即可實現代碼改變顏色)。

xiu主題用戶動態Logo專用方案：

.logo a{

-webkit-transition: background-position linear .2s;

-moz-transition: background-position linear .2s;

transition: background-position linear .2s;

}

.logo a:hover{

background-position: center -48px;

}

在主題的style.css最后加上，再做個原來Logo高度2倍的圖先替換，然后更改其中的-48為你的位置即可，不會計算的話直接多試幾個就能知道哪個合適了。

總結

以上是生活随笔為你收集整理的html logo动画效果图,简单CSS3技巧实现的Logo动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。