我们学习了 CSS Sprites(图片合并)来减小 HTTP 请求和 KBs。这些 sprites 将多个图片整合到一个图片中,然后再用CSS来定位。
我们有没想过使用同一张图片,给它添加几行 CSS 代码,我们会得到不一样的效果呢?
我们可以使用 CSS3 中的 Transform
和 Transition
来循环使用图标得到不同的效果。
重复使用一张图片总比加载多个图标、sprite 好吧。
例子:jQuery UI 的 sprite
温馨提示:
1、本文章需要支持 CSS3 Transition 和 Transform 的游览器,请使用 Chrome、Firefox 或者 Opera。
2、如果你订阅了本博客,请打开本文游览(CSS 代码不能在 feed 显示)。