【魅力CSS】使用CSS3动画制作时钟

倒倒苦水

做完这个小玩意之后,我觉得,我一定是闲得蛋疼才做的。嗯,一定是的。

话说昨天今天加班,下午下班前总算把临时变更的需求完成的七七八八了,昨晚又爬了一趟南山,累的不行...

想起某个产品说的,工作累了,就写写代码,休息一下 =_=||

好了,言归正传。下午偶然看到一个jquery+css3实现的时钟,挺漂亮的,突然觉得是不是也可以用纯css3整一个,于是乎...先看看最终效果

【疯狂的菊花系列】用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-function有st......

【疯狂的菊花系列】全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上画图太累( 这不就是把ps搬到网页么.......