【魅力CSS】CSS3滑动背景菜单
例牌的唠叨
想当年哇，刚写编程的时候，做页面想用些绚丽的效果，可那个时候不会js，才刚学java，哪那么快搞股这么多东西呢。无奈只好google搜（当年google这愣头青还才跑进中国呢），找了一大堆，不是运行出错就是只支持ie，真是坑爹啊~~
当年菜单特效很流行，好像没有动画就不能进菜单家门了。在google N久之后，我也终于找到一个滑动背景效果的代码。不懂原理，也用得不亦乐乎。
以上都是废话
嗯，以上都是废话 :oops:。最近偶然看到以前做的滑动背景菜单，看了下代码，都快笑喷了 -- 天啊，我竟然写过这么挫的代码! 所谓滑动背景菜单，就是鼠标移上去，会有一个气泡什么的垫......
【魅力CSS】使用CSS3动画制作时钟
倒倒苦水
做完这个小玩意之后，我觉得，我一定是闲得蛋疼才做的。嗯，一定是的。
话说昨天今天加班，下午下班前总算把临时变更的需求完成的七七八八了，昨晚又爬了一趟南山，累的不行...
想起某个产品说的，工作累了，就写写代码，休息一下 =_=||
好了，言归正传。下午偶然看到一个jquery+css3实现的时钟，挺漂亮的，突然觉得是不是也可以用纯css3整一个，于是乎...先看看最终效果
或者你也可以直接点这里看代码（因为我太喜欢啰嗦啦...）
more
表盘
好了，先搭个结构，html挺简单的，没几个代码，看看下面：
<div class=&qu......
【疯狂的菊花系列】用CSS3帧动画实现Loading
一直以来，本人都认为css3的animation只能实现渐变动画，比如高度从0渐变到100px这类的。而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。
但是在看到天才的师姐给的例子之后， 让我愧疚得无地自容，原来还真有css3帧动画的，T_T。这个属性是 timing-function: step-end; 而且firefox、webkit、ie10都有支持，详细介绍可以在这里(https://developer.mozilla.org/en/CSS/timing-function#step-end)看。
跟帧动画有关的timing-funct......
【魅力CSS】CSS3单边阴影
话说，CSS3的事实标准出来那么久了，很多属性都开始去掉私有前缀了，如 box-show。如果你还不知道box-show是什么，那只能说你是个正常人类，不是前端攻城师，可以离开这里回去地球了。
既然你还在继续看到这，那么你可能知道box-shadow，不过我还是要讲概念，^_^。 box-shadow，顾名思义就是盒子阴影，可以给一个块级容器加上阴影或者发光效果。效果如下：
把阴影的颜色和透明度调整下，就可以整成发光效果了。不过今天的主角不是他。略过。
说回正事，这box-shadow虽然好用，可是有时还会遇到蛋疼的设计。 搞出只有一边的内阴影。而box-sh......
【疯狂的菊花系列】全CSS3制作Loading动画
话说上三回，我们用css3的animation让png图片动起来了。
但是美中不足的是，还要画一张图片。如果要求做几个不同大小的菊花，或者要换个颜色，又或者要不同的地方用不同的颜色和大小的菊花，得找到原图(psd之类的)再导出一个不同的size，个人感觉蛋疼死了。
这次咱们用css3来画那几个点，让它能大能小能色，嘿嘿~~(邪恶了)。
先看看效果吧，用鼠标左键狠狠的砸这里。
菊花上有12个点，我们用12个span标签来做，宽高使用百分比，用来自适应外层容器的变化，圆角设置为100%，就可以保证显示成一个圆了。
接下来的事情就比较痛苦，需要一个个摆到正确的......
【疯狂的菊花系列】使用CSS3制作PNG Loading图
Loading图，也就是俗称的菊花，大部分网站都会用到，而一般情况用的都是gif动画，但是gif能保存的颜色太少，导致有渐变的图导出来后有毛边，很不美观。
不过随着html5和css3的出炉，我们终于可以把loading做的更加美观啦。
之前用png制作loading动画并不是没有，但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样)，咱不熟ps，画起来相当吃力。
而在html5/css3的带领下，我们又有了两个新的方法: canvas和css动画。
但是我是相当讨厌用js代替css本身就可以实现的功能，而且本人觉得在cavas上画图太累( 这......
【魅力CSS】使用CSS3的Linear Gradients (线性渐变)制作渐变背景按钮
该方法用到主要特性是 gradient
gradient只有ff和webkit内核的浏览器有支持，不过目前都还是私有的，不知道何时才能标准化
在ff和webkit的调用方式都还不一样，具体可以看这里和这里，说明的很清楚了
ie可以用滤镜达到效果，一如既往的无视它
来看看效果先：
more
用到的主要代码如下：
完整的demo请点击这里
【魅力CSS】用CSS3的transform垂直排列日期
废话少说，先上图：
当然了，transform属性目前的ie不支持，但那不关我事。
传说也可以用滤镜解决，具体办法到google搜"css 垂直排列日期"就有了。more
rotate是一个使目标旋转的属性，属性值从-180到180都行，可以认为是试一个点绕着圆心转，不过转360也没意义。
目前支持的浏览器有Ff、webkit内核、以及opera
原理很简单，将日期按照"月/日/年"的顺序上下排列，然后旋转年份-90度，再通过translate属性进行位移定位
主要代码如下，demo请点击这里：