讓你的專題頁面動起來

日常工作中會遇到很多的專題，在沒有flash的支持下，如何讓你的頁面更生動呢？ CSS3不是新事物，CSS3動畫也逐漸受到大家的關注，在機甲&洛克合作不刪檔放號專題中首次嘗試了CSS3的簡單動畫制作。 專題地址http://jjxf.qq.com/act/a20120907roco/，請使用chrome瀏覽器或者Firefox瀏覽器查看。

拿到頁面設計稿后，起初打算從龍星的眼睛、嚕嚕、槍炮武器上進行一些效果實現，最后為了突出活動抽獎，決定增加抽獎按鈕的光效以及獎品的呼吸效果。最終頁面呈現包括五個效果點：龍星眼睛的眨動、嚕嚕的飄動、抽獎按鈕的光效、獎品的hover呼吸燈效果以及槍炮武器的發光效果。

思路：首先設置初始屬性，背景Y軸位置為0，將背景遮住眼睛，最終屬性則是將背景位置移動到-3000px的位置，通過背景在4s內沿Y軸勻速運動3000px的過程實現了眼睛眨動的效果。嚕嚕的飄動以及抽獎按鈕的發光效果與眼睛眨動效果是同樣的原理。 效果代碼如下：

思路：初始屬性設置背景透明度為0.6，最終屬性設置背景透明度為1，通過背景透明度的平滑變化，形成一個發光的呼吸效果。 效果代碼如下：

實現這樣簡單的動畫效果，需要運用到CSS3的哪些屬性呢？

CSS3有3個動畫屬性：

1、變形transform transform字面上就是變形，改變的意思。在CSS3中，transform主要包括了旋轉rotate、縮放scale、移動translate、扭曲skew以及矩陣變形matrix。 具體屬性說明以及demo演示請使用chrome瀏覽器查看 http://tgideas.qq.com/demo/css3/transform.htm 洛克&機甲不刪檔合作放號專題上眼睛的眨動、嚕嚕的飄動、抽獎按鈕的發光效果并不是只能用背景移動來實現，我們還可以可以運用translate對div進行位置移動來實現。 Tgideas的一些實例運用(請用chrome瀏覽器或firefox瀏覽器查看)：

piggy	jinhui	karin

2、轉換transition css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。 transition的使用寫法：

合并寫法： 具體屬性說明以及demo演示請使用chrome瀏覽器查看 http://tgideas.qq.com/demo/css3/transition.htm Tgideas的一些實例運用(請用chrome瀏覽器或firefox瀏覽器查看)：

lam	dg	nornor

3、動畫animation animation按照字面上的意思就是“動畫”的意思，但在CSS3中animation只應用在頁面上已存在的DOM元素上。運用animation，結合變形transform、轉換transition，可以制作出簡單的動畫效果。在制作動畫前，先了解一下關鍵幀keyframes。

1）、Keyframes 我們把他稱為“關鍵幀”，在使用transition制作簡單的轉換效果時，我們包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一個中間值，如果我們要控制的更細一些，比如說我要第一個時間段執行什么動 作，第二個時間段執行什么動作（換到flash中說，就是第一幀我要執行什么動作，第二幀我要執行什么動作），這樣我們用Transition就很難實現 了，此時我們也需要這樣的一個“關鍵幀”來控制。 keyframe寫法:

2）、動畫animation animation的寫法：

合并寫法：

具體屬性說明以及demo演示請使用chrome瀏覽器查看 http://tgideas.qq.com/demo/css3/animation.htm Tgideas的一些實例運用(請用chrome瀏覽器或firefox瀏覽器查看)：

nornor	hairong

CSS3的兼容性：

各瀏覽器前綴： IE：-ms- Firefox：-moz- Chrome：-webkit- Safari：-webkit- Opera：-o-

一點總結：

CSS3效果不需要任何其他插件的支持，對于iPhone、iPad都可以正常瀏覽，但是對于IE，幾乎不支持，國內50%左右的用戶仍然在使用IE，導致很大一部分人其實看不到這個效果，但是對于FireFox、Chorme等瀏覽器進行CSS3效果的實現，對于高端瀏覽器用戶來說，不失為一件令用戶感到開心的事情，同時這也是一件讓自己開心的事情。 初次嘗試CSS3效果實現，由起初的無從下手、焦躁不安，到最后效果呈現時的開懷，其實很多事情并不難，只要自己去嘗試探索，總能在其中找到各種快樂！

ps:感謝Tgideas的Must大神幫忙配圖！

原文地址：http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201212/184628.shtml
作者：hairong