【魅力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......

【疯狂的菊花系列】全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上画图太累( 这......

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟