浅谈淘宝改版

早上听说淘宝改版了,遂去观摩一下,打开新版淘宝给人第一感觉就是简化了许多,精简了那些闪啊闪,弹啊弹,飘啊飘的广告,这是一个值得称赞的改动,对于操作基本集中在导航与搜索框的用户来说(比如说我=.=),冗余的内容只会降低个人的用户体验.再次,从改版中也可以看出淘宝的侧重在往社区倾斜,当然这也在预料之中,毕竟拥有如此大的用户群,不好好利用起来着实是一种浪费:) 另外对淘宝电器城比较期待~

新淘宝

Continue reading

呼吸灯效果的按钮

[2010.4.3]CSS3 制作呼吸灯效果

发现了 CSS3 的一个动画属性,用来实现呼吸灯效果就比较简单了,这里以 Webkit 内核浏览器为例,可以先看 Demo(请使用 Webkit 内核浏览器预览)

提示:你可以先修改部分代码再运行。

主要原理是使用了 CSS3 的animation动画属性:

-webkit-animation-timing-function: ease-in-out;    /*动画时间曲线*/
-webkit-animation-name: breathe;                  /*动画名称,与@keyframes搭配使用*/
-webkit-animation-duration: 2700ms;              /*动画持续时间*/
-webkit-animation-iteration-count: infinite;    /*动画要重复次数*/
-webkit-animation-direction: alternate;         /*动画执行方向,alternate 表示反复*/

以及@keyframes关键帧:

@-webkit-keyframes breathe {
    0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
    100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}

参考资料:https://www.webkit.org/blog/324/css-animation-2/

GIF 模拟呼吸灯效果

昨天看到一个鼠标的呼吸灯效果,很是喜欢,于是用一张 jpg 和两张 gif 图片模拟个呼吸灯效果的按钮,但因为两个 gif 图片加起来就差不多28K,载入较慢,所以实用性不强。

尝试通过 CSS 将 GIF 图片提前缓存,然后在 hover 效果时就可以直接展示,但因各浏览器处理 GIF 图片播放方式的不同( IE6 下 GIF 图片载入后就直接播放了),所以最终还是无法完美实现效果,下面这个 Demo 只能算是自娱自乐了。

提示:你可以先修改部分代码再运行。