轮播动画简单实现

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

CSS3 transform

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

CSS3 animation

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

两端对齐布局与text-align:justify

前几天在项目开发过程中需要实现一个列表两端对齐,想着在页面开发过程中也经常会有需要用到两端对齐布局的时候,就计划总结一下常见实现方式,与诸位交流。

CSS3之transition

JavaScript是单线程执行的,代码是一句一句执行的,而异步任务,如定时器或者动画,会被压入执行队列,在线程空闲时执行。在CSS3动画出现之前,我们通常使用定时器和JavaScript实现动画效果,但是由于JavaScript单线程执行,很容易发生动画卡顿,效果较差。CSS3提供的过渡(transition)、动画(animation)、变换(transform)能比较好的为我们展现不同的动画效果,因此有必要对其进行了解、学习,本篇开始介绍CSS3之过渡。