日常工作中会遇到很多的专题，在没有flash的支持下，如何让你的页面更生动呢？
CSS3不是新事物，CSS3动画也逐渐受到大家的关注，在机甲&洛克合作不删档放号专题中首次尝试了CSS3的简单动画制作，请使用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浏览器查
洛克&机甲不删档合作放号专题上眼睛的眨动、噜噜的飘动、抽奖按钮的发光效果并不是只能用背景移动来实现，我们还可以可以运用translate对div进行位置移动来实现。
Tgideas的一些实例运用(请用chrome浏览器或firefox浏览器查看)：http://www.j-ning.com