CSS3實現的Logo動畫效果例子

css3動畫處理是非常的的強大了,許多的一些動畫效果可以直接使用css3而不用js來實現了,下面一起來看一個簡單CSS3技巧實現的Logo動畫.

下面是演示的案例代碼,

<style>
.imlogo{
display: block;
width: 160px;
height: 80px;
background: #FF5E52 url(/wp-content/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;
}
</style>

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

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

CSS3實現的Logo動畫效果例子

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爲你的位置即可,不會計算的話直接多試幾個就能知道哪個合適了。

css3動畫實例

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>動畫</title>

<h3>動畫筆記</h3>

<style>

h3{margin: 0 auto;width: 100px;}

.loading-demo{height: 60px; width: 60px;margin: 20px auto;position: relative;}

.act1,.act2{height: 100%;width: 100%;border-radius: 50%;background: #26c1ce;position: absolute;top: 0;left: 0;

-webkit-animation: loading 2s infinite ease-in-out ;

-moz-animation: loading 2s infinite ease-in-out;

animation: loading 2s infinite ease-in-out;

/*動畫名字 動畫時間 循環 開始最後緩慢*/

opacity: .6;

}

/*顔色加深是因爲重疊了*/

.act2{-webkit-animation-delay:-1s;}

@-webkit-keyframes loading{

0%,100%{ -webkit-transform: scale(0.0)}

50%{ -webkit-transform: scale(1.0)}

}

@-moz-keyframes loading{

0%,100%{ -webkit-transform: scale(0.0)}

50%{ -webkit-transform: scale(1.0)}

}

@keyframes loading{

0%,100%{ -webkit-transform: scale(0.0)}

50%{ -webkit-transform: scale(1.0)}

}

</style>

</head>

<div class="loading-demo">

<div class="act1"></div>

<div class="act2"></div>

</div>

<body>
</html>

更多相關文章
  • 利用css3制作loading效果是非常的簡單的一事情,感覺和html5有點像了,下文整理一篇CSS3制作loading載入動畫效果例子,有興趣的可進入參考.在我們這次的新設計教程中,我將向您展示如何創建純CSS3的
  • js+html5+css3實現的滑動下拉刷新效果實例
    本文我們來實現一個用 js + html5 + css3 實現在移動端滑動下拉就刷新數據的效果,有點類型于淘寶手機站,本文有源代碼,感興趣的朋友可以參考一下.今天想說的是如何自己操刀做一個js的下拉刷新(js + h5 + css3).既然是下拉,那麽應用場景當然就是在手持設備上.在JavaScri
  • 在CSS 3引入Transition(過渡)這個概念之前,CSS是沒有時間軸的.也就是說,所有的狀態變化,都是即時完成.例如在以前當滑鼠放置于縮略圖之上,縮略圖會迅速變大.注意,縮略圖的變大是瞬間實現的.下面是代碼,相當簡單.具體例子 代碼如下 img{ height:15px; width:15p ...
  • CSS3中利用Animation steps屬性實現指針時鍾效果
    下面我們一起來看一篇關于CSS3中利用Animation steps屬性實現指針時鍾效果的例子,希望例子對各位有幫助.animation 默認以 ease 方式過渡,它會在每個關鍵幀之間插入補間動畫,所以動畫效果是連貫性的.除了ease, linear.cubic-bezier之類的過渡函數都會爲其
  • CSS3要制作動畫是非常的簡單的事情了,我們只需要簡單的幾行代碼就可以實現動畫效果,下文來看一個CSS3使用Animate.css制作超炫的動畫效果.Animate.css是一個超強的CSS3動畫庫,它使用簡單,只需要將相關效果對應的class加入頁面元素中,就能實現翻轉.滑動.旋轉等等複雜超炫的跨 ...
  • css3實現的switch滑動開關按鈕的效果
    開關按鈕效果現在的智能手機都是這種做法了,我們現在的css3也具備這種功能了,下面我們就一
  • jquery中animate和CSS3實現緩動追逐示例
    在jquery中animate方法可以實事效果慢慢載入了,下面我們給各位整理了一個jquery中animate和CSS3實現緩動追逐示例,希望此例子對各位有幫助.CSS3和jquery都可以實現緩動追逐效果,但是考慮到浏覽器的兼容性,建議使用jquery animate方法來實現. 實現效果如下:
  • 純CSS3實現的Tab選項卡三個實例分享
    現在主流浏覽器已經支持CSS3了(xp上的ie8就不要說了),以前在用傳統的js+css制作的tab選項卡已經過時,本文我們分享幾個使用純css3實現的tab選項卡的實例代碼.實例一:下面我們一起看看用純CSS來制作一個選項卡的方法.使用純CSS3來制作Tab的好處除了不需要使用jQuery外,還支 ...
一周排行