CSS3

Web动画API教程1:创建基本动画

我们已经初步了解了统一web动画API的内容,但是我们还没有真正去对规范的细节进行探讨,所以现在开始吧。WAAPI为你提供了比你用于CSS动画更多的控件,但是在了解它们之前,我们先打一下基础:如何使用这个API创建一个基本的动画?

我们来谈谈Web动画API:简介

大概一年之前,Google在Polymer上宣布了Material Design的存在,并且表示将使用polyfill作为即将到来的统一Web动画API标准。我没有听说过这个API,但是我非常好奇,特别是它提到的MotionPath(运动路径)效果。目前尚未实现(你可以在这系列教程的Part 5中找到相关内容),但是它的目标是提供一种统一CSS、JS和SVG的方法来实现动画,这让我非常感兴趣。一年之后Chrome和Firefox已经开始实现这块内容,polyfill的进展非常平稳,所以是时候来认真研究一下它了。

为什么要使用repeating-linear-gradient

渐变是一个很意思的CSS3属性,有了它可以帮助我们解决很多问题。而这篇文章的内容源于@Keith Clark最近在Twitter发的帖子。CSS的重复线性渐变可以做些什么?我们使用线性渐变和background-size能做出相同的效果吗?而且有哪些效果是linear-gradientbackground-size结合在一起无法完成的效果。

CSS3制作球体

这篇文章通过示例一步一步的告诉大家如何使用CSS来创建3D球体效果。并且如何利用CSS的box-shadow和渐变来给3D球体添加一些光泽效果,让球体更具像是在一个3D空间。并且配合CSS的animation让整个球体运动起来。通过上面的示例再次证明了,运用好了box-shadow和渐变能制作出各种各样的效果。

@font-face的困境

最近在互联风上有关于Web字体的性能表现讨论的越来越多。自定义的Web字体使用虽然还在持续增长,但是没有过多的人考虑其实际性能。基本的@font-face使用方法至使用户加载字体受到阻塞。我去了解了@font-face以及寻找问题所在,并且探索改善字体加载性能,使使用Web字体的性能更好,加载字体更流畅。

调试 CSS Keyframe 动画

学会语法就可以制作 CSS 动画,但是要想做出动感、美观的动画,仅会语法是不够的。动画直接关系到用户体验,因此我们需要改进代码,从而找到正确的触发时机并掌握调试动画的方法。经过一番研究之后,我总结了一些有用的工具和方法。

用CSS和SVG制作饼图

饼图,即使是最简单的只有两种颜色的形式,用Web技术创建也并不简单,尽管都是一些常见的信息内容,从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现,或是使用大型的JavaScript框架来设计更复杂的图表。尽管这个东西并不像它曾经看起来那么难以实现,但是也没有什么直接并且简单的方法。但是,现在已经有很多更好、更易于维护的方式来实现它。

苹果表动画

随着苹果表的大量生产,我想,用CSS来实现拨号动画的时候到了。在这篇文章中,我们将使用keyframe动画和一点小技巧来实现苹果标表盘进度条动画。

使用CSS画个大白(●—●)

这一次我们将使用CSS来画个超能陆战队里面大白的头像。我们的做法是在一个元素上,使用CSS动态改变背景图的位置,并且加上一些线性效果。

Twitter上的点赞动画

推特最近更新了他们的点赞按钮,使用了全新的动画,而这个动画使用一组动画来实现的而不是依赖于CSS的 transitions。今天使用CSS动画的steps方法来重建这个动画。

页面

返回顶部