Posts tagged with CSS3


今天在爆栈上刷信仰积分时看到这样一道问题

How to animate the height of the background image

I have tried the following scenario which I need to animate my background image like filling from bottom to top on hover of my div. Whereas my animation is not like filling from bottom instead its like sliding from bottom to top. Can any one suggest me the right way how I can achieve my result. I am ok with jQuery animation as well and css3 keyframe animation.

Code:

<div class="bg"><span></span></div>  
.bg {
  background: url(...) no-repeat center;
  height: 250px;
  position: relative;
}
span {  
  background: url(...) no-repeat top 32px center;
  bottom: 0px;
  height: 0;
  transition: height 0.5s;
  position: absolute;
  right: 0;
  left: 0;
}
.bg:hover span {
  height: 184px;
}

大意是要实现一个背景图片自下而上展开的效果,如图:

...

一、不堪回首的过往

在应用 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)一个类似的效果。

...

最近在考虑用 DOM 实现 2D 游戏基本动作,其中需要实现精灵(sprite)的行走,跳跃等动作,因为 Canvas 才刚开始学习,于是便想用 CSS3 来实现这个动作。

首先从 dribbble 上找来某位大师的作品:

作为 2D 游戏,要响应键盘的动作就肯定不能直接使用 Gif 图了,于是在 Photoshop 中打开这张图,提取出所有帧:

...