雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

觀察期 CSS3 實現Logo動畫

假裝紳士??1年前 (2018-09-04)1584A+A-

半年沒更新自己的網站了。

估計這次更新將會影響雞西網站設計等相關詞的排名,但浮動不會太大,也會很快恢復。

教程開始!

要實現Logo的動畫效果,這里就簡單做個演示。東西相對較簡單,所以不要認為你搞不定它。

下面是演示的案例代碼,你也可以點擊查看動畫效果

<style>
.imlogo{
display: block;
width: 160px;
height: 80px;
background: #0072ff url(http://cdn.7vnet.com/wp-content/uploads/2018/09/guanchaqi-01.png) center 30px 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;
}
</style>

<a class="imlogo" href="#"></a>

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

全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖