现代 CSS

Airen的博客

Sass中的数据类型

数据类型几乎在所有编程语言当中都有,在Sass中也不例外。数据类型是根据不同的用途分的类。例如2是一个数值(number),而SitePoint是一个字符串(string)。在这篇文章中,将涵盖Sass中所有的数据类型(共有七种数据类型),并且通过一些简单的例子来阐述这些数据类型在Sass中如何使用。

JavaScript中的随机数

在JavaScript中随机性经常都会使用到,但随机性也有许多种不同的类型,以及需要根据不同的应用程序选择不同的随机性。今天尝试了一下,在JavaScript中数值的处理也是多种多样,非常的有意思,而且有些处理让人不解。只能暂作记录,慢慢考究。

JavaScript算法练习:取二维数组中最大值的几种方法

在JavaScript中可以通过内置的Math.max()的最大值,但是要从多重数组中取出最大值,还是有一定的难度。假设你有一个数组,而且这个数组中包含了数字的子数组,而我们要做的是从数组中的每个子数组中返回其最大的那个最大数。这篇文章介绍了如何实现在二维数组和多维数组中取出最大值的几种方案。

CSS秘密花园: 沿着路径的动画

几年前,当CSS动画刚出来的时候是多么的令人兴奋,那时Chris Coyier问我,有没有什么方式使用CSS让元素绕一个圆形的路径运动。当时,它只是一个有趣的想法,但我在无意中发现有很多这方面的用例。例如,Google+添加新成员就使用了这样一个动画。当时我和Chris都没有想出一个合理的方式来解决这个问题。我们可以想出的最好方法是通过多个关键帧绘制近似一个圆形的路径,显然这不是一个好的主意,也没有任何方式能定义出来这样的圆形路径。那么我们必须得想出一个更好的方法,对吗?

CSS秘密花园: 动画状态

动画并不总是页面加载的时候就开始。往往,我们都想通过用户的操作来触发动画,比如鼠标的悬浮(:hover)或者鼠标按下时(:active)。在这种情况之下,我们可能没办法控制动画播放的实妹次数,用户可能会迫使动画停止。例如,用户有通过悬浮(:hover)触发动画:鼠标移出元素之前动画结束。在这样的例子中会发生什么呢?如果你的回答是“动画应该会呆其当前状态”或者“动画会顺利的过渡到前置状态”。默认情况下,动画就会停下来,突然跳到最初始状态。有时候可能会接受这种非常微妙的动画。但在大多数情况下它直接影响用户的体验。那么我们可以改变这种行为吗?

CSS秘密花园: 文本动画

有时候我们想要模拟文本输入的动画效果,就是文本一个一个的出现。这种动画效果特别在科技网站上流行。使用的正确,让你的网站效果直接提到另一个档次上。通常要实现这样的效果都需要复杂的JavaScript脚本。尽管这只是纯粹的演示,使用CSS实现这样的效果那简直就是白日做梦。怎么可能呢?实现这个动画思路是包含文本的元素宽度从0慢慢过渡(一个字符一个字符)元素内容宽度。你可能意识到这种方法的局限性是什么:它不能在多行文本中运行。值得庆幸的是,大多数时候,只是单行文本上使用这种动画效果,比如说标题。

CSS秘密花园: 闪烁动画

您还记得<blink>标签吗?当然,你可能做过这样的事情。它在我们行业已成为一个历史,也成为一种方化的符号。但全世界的人都鄙视他,因为它违反了样式和结构的分离原则,但最主要的是原因是国灰在90年代末网页是过度的使用它,使用大家感到很痛苦(那时候的网页都有大量的<blink>制作的闪烁效果,闪得让你头晕)。甚至发明这个标签的人Montulli也给示:"发明<blink>标签是为互联网做过最糟糕的一件事情"。

CSS秘密花园: 逐帧动画

通常,我们需要一个动画效果是比较难的或者说使用CSS的transition是不可能实现的。例如,一个卡通移动或一个复杂的进度条。在这种情况下,基于图像的逐帧动画是完美的,但是实现这种效果是具有挑战性的。在这一点上,你可能会说:难道我们不能使用gif动画?很多情况下,答案是肯定的,gif动画是完美的。

CSS秘密花园: 灵活的过渡

灵活的过渡和动画效果(如bounce的过渡效果)一直是一个流行的效果,给人有一个更好的感觉——在现实生活中,物体从A位置移动到B位置,很少是不灵活的移动。这篇文章详细介绍介绍了有关于CSS3动画的制作细节,让Web的动画效果更佳灵活。

CSS秘密花园: Sticky footers

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。这种效果不仅是无处不在,很受欢迎,而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外,在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的,很少是可行的。实际上实现这个效果过于复杂,而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制,但使用现代CSS,我们能把这个效果做得更好,那要如何做呢?

页面

返回顶部