轮播动画简单实现

现在的前端,越来越注重用户交互和体验,有很多动画和效果是很常见的,如本篇要讲的主题:轮播动画。这和以前经常听到的一个名词--”跑马灯“效果一样。在CSS3出来之前,都是通过JavaScript实现的动画,现在我们完全可以使用CSS3,性能有很大的提升,兼容性也已经很不错,尤其是移动端。

CSS基础line-height和vertical-align属性

对于line-height属性,作为一个前端开发人员,肯定都不陌生,天天都在使用的一个CSS属性,但是这也是一个很考验一个前端开发者CSS基础功力的知识点,本篇就对line-height及其相关联属性vertical-align进行详细学介绍。

CSS3 transform

CSS transform属性向元素应用 2D 或 3D 转换,其后紧跟一个变换函数支持我们修改CSS视觉格式化模型中的元素坐标,通过声明变换函数,允许移动(转换),旋转,缩放,倾斜元素。

CSS3 animation

在之前,我们介绍过CSS3 transition过渡,其中实现了一个小球弹动动画,本篇继续深入介绍CSS3 animation,动画相关知识。相对于CSS3 transition,其主要作用于元素状态间的转换,实现的动画主要是在两个状态间的转换,只适合实现一些简单动画,而且通常需要JavaScript配合,对于复杂的动画并不适合;而CSS3 animation则更强大,它允许我们为动画定义许多关键帧,每个关键帧代表动画过程中某个状态,它可以使动画在不同状态间更平滑过渡。

CSS盒模型(BOX Model)

CSS盒模型描述的是为文档树中的元素创建并根据CSS视觉格式化模型(visual formatting model)布局的矩形盒子。

CSS外间距崩塌(margin collapse)

CSS中块盒子的上下外间距有时会崩塌或折叠成一个单一的外间距,其值为发生崩塌的上下外间距中的最大值。

CSS之视觉格式化模型(Visual Formatting Model)

CSS中的visual formatting model(视觉格式化模型)是一种处理文档并把它显示在可视化媒体上的算法。这是CSS中的一个基础概念。visual formatting model把文档的每一个元素转换成0个,1个或多个符合CSS盒模型的盒子,包括块级盒和行内级盒。

CSS之格式化上下文(formatting context)

格式化上下文,是CSS视觉渲染过程的一个概念,它主要影响盒子的布局。普通流中的每一个CSS盒子,都会属于一个格式化上下文,是块格式化上下文(block formatting context)和行内格式化上下文(inline formatting context)中的一种。块级盒子参与块格式化上下文,行内级盒子参与行内格式化上下文。