Posts tagged with CSS3


一、不堪回首的过往

在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function>。它的取值中除了常用到的三次贝塞尔曲线以外,还有个让人比较困惑的 steps() 函数。在许多相关文章里,关于这个函数的解释都比较含糊其辞,比如:

steps() 第一个参数 number 为指定的间隔数,即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。

又如:

steps 有两个参数

  1. 第一个肯定是分几步执行完
  2. 第二个有两个值
    1. start 第一帧是第一步动画结束
    2. end 第一帧是第一步动画开始

年少无知的我轻易就相信了大家的说法,每次应用 steps() 函数时都要先考虑一番:嗯,start 对应末态,end 对应初态,末态是 OOOO,初态是 XXXX……卧槽!跑起来不对!

...

一、很久很久以前

遥远的 CSS 大草原上,生活着一群草泥马前端攻城狮,在这里攻城狮们捕捉着各种各样属性和创造新属性,施以魔法来构建他们的玩具。有一天,攻城狮们发现了一直被冷落在角落里的 clip 属性……

二、发动咒语

在 MDN 的魔法书上,clip 属性的语法是这样被规定的:

clip: <shape> | auto  

值得注意的是,clip 属性仅在设置了 position: absolute | fixed 的元素上生效

<shape> 仅接受 rect() 矩形裁切,看起来似乎很废柴,因此一直被大家忽视,但用好 clip 属性能创造出许多黑魔法般的效果。

...

一、源起

今年的开发者大会上,Google 发表了 Android L 和跨屏统一 UI 风格—— Material Design。

这个承载着 Google 统一大愿的设计语言,恰恰给一味扁平化的 Designers 敲了一记闷棍:

一切都仿佛变成了色块加文字。哪个是按钮?哪个不是?哪些是重要的信息?哪些不是?当扁平化的风格让信息层级也扁平化,影响了「信息的正确沟通」这个最终目的时,我们知道这样的扁平化已经跳得太远。

所以 Google 选择了往回跳一小步。在扁平化的基础上,保留了物理世界的阴影和动作。

Material Design 等于是强调了物理定律的扁平化设计。 Google is trying to bringing physicalityinto Flat Design.

——Material Design:向拟物回跳一下的扁平化设计 - 笔戈科技 - 知乎专栏

偶然有一天,后端同学给我发了 Polymer Project 这个网站,第一次看到 Material Design 的前端组件化实现的我惊艳不已,尤其是 Button Click 时的水波纹效果 的那种交互效果,简直让人感动到想哭 (笑)。

于是按捺不住激动,便开始考虑自己实(chao)现(xi)一个类似的效果。

...