例牌的唠叨
想当年哇,刚写编程的时候,做页面想用些绚丽的效果,可那个时候不会js,才刚学java,哪那么快搞股这么多东西呢。无奈只好google搜(当年google这愣头青还才跑进中国呢),找了一大堆,不是运行出错就是只支持ie,真是坑爹啊~~
当年菜单特效很流行,好像没有动画就不能进菜单家门了。在google N久之后,我也终于找到一个滑动背景效果的代码。不懂原理,也用得不亦乐乎。
......
例牌的唠叨
想当年哇,刚写编程的时候,做页面想用些绚丽的效果,可那个时候不会js,才刚学java,哪那么快搞股这么多东西呢。无奈只好google搜(当年google这愣头青还才跑进中国呢),找了一大堆,不是运行出错就是只支持ie,真是坑爹啊~~
当年菜单特效很流行,好像没有动画就不能进菜单家门了。在google N久之后,我也终于找到一个滑动背景效果的代码。不懂原理,也用得不亦乐乎。
......
倒倒苦水
做完这个小玩意之后,我觉得,我一定是闲得蛋疼才做的。嗯,一定是的。
话说昨天今天加班,下午下班前总算把临时变更的需求完成的七七八八了,昨晚又爬了一趟南山,累的不行...
想起某个产品说的,工作累了,就写写代码,休息一下 =_=||
好了,言归正传。下午偶然看到一个jquery+css3实现的时钟,挺漂亮的,突然觉得是不是也可以用纯css3整一个,于是乎...先看......
一直以来,本人都认为css3的animation只能实现渐变动画,比如高度从0渐变到100px这类的。而无法实现高度从0跳变到50px再跳变到100px这种类似flash的帧动画效果。
但是在看到天才的师姐给的例子之后, 让我愧疚得无地自容,原来还真有css3帧动画的,T_T。这个属性是 timing-function: step-end; 而且firefox、webkit、ie10都有支......
话说,CSS3的事实标准出来那么久了,很多属性都开始去掉私有前缀了,如 box-show。如果你还不知道box-show是什么,那只能说你是个正常人类,不是前端攻城师,可以离开这里回去地球了。
既然你还在继续看到这,那么你可能知道box-shadow,不过我还是要讲概念,^_^。 box-shadow,顾名思义就是盒子阴影,可以给一个块级容器加上阴影或者发光效果。效果如下:
话说上三回,我们用css3的animation让png图片动起来了。
但是美中不足的是,还要画一张图片。如果要求做几个不同大小的菊花,或者要换个颜色,又或者要不同的地方用不同的颜色和大小的菊花,得找到原图(psd之类的)再导出一个不同的size,个人感觉蛋疼死了。
这次咱们用css3来画那几个点,让它能大能小能色,嘿嘿~~(邪恶了)。
先看看效果吧,用鼠标左键狠狠的砸这里。......
Loading图,也就是俗称的菊花,大部分网站都会用到,而一般情况用的都是gif动画,但是gif能保存的颜色太少,导致有渐变的图导出来后有毛边,很不美观。
不过随着html5和css3的出炉,我们终于可以把loading做的更加美观啦。
之前用png制作loading动画并不是没有,但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样),咱不熟ps,画起来相当吃力。......
该方法用到主要特性是 gradient
gradient只有ff和webkit内核的浏览器有支持,不过目前都还是私有的,不知道何时才能标准化
在ff和webkit的调用方式都还不一样,具体可以看这里和这里,说明的很清楚了
ie可以用滤镜达到效果,一如既往的无视它
来看看效果先:
废话少说,先上图:
当然了,transform属性目前的ie不支持,但那不关我事。
传说也可以用滤镜解决,具体办法到google搜"css 垂直排列日期"就有......