Press "Enter" to skip to content

使用CSS实现圈人效果(CSS Sprites)

我最早了解到”图片合并”技术, 应该是在大学游戏时代, 会发现很多游戏图标, 都会合并在一个位图中, 然后使用类似”遮罩”的技术来分别显示各种图标.

第一次使用CSS Sprites技术的时候, 其实并不知道它的这个名字, 也并没觉得多稀奇,就是个遮罩么.

今天玩开心网的圈人游戏时候, 发现它的实现是使用了Js, 突发奇想, 或许可以使用CSS Sprites来实现, 抛弃内嵌的JS.

效果如下:

图标标记
1. 显示器
17’的显示器哦~
2. 电话
听筒坏了
3. 机箱
白色的机箱
4. IBM ThinkPad
ThinkPad
5. 外置光驱
我不知道这玩意是哪里买的

有兴趣的同学, 可以直接看HTML源码, 一个独立页面的例子在这里

5 Comments

  1. super mario bros
    super mario bros 2018-10-02

    有兴趣的同学, 可以直接看HTML源码, 一个独立页面的例子在这里

  2. 荆棘
    荆棘 2012-01-26

    我倒想尝试一下~

  3. reeze
    reeze 2009-06-11

    恩。不过sprites的方式扩展起来比较麻烦啊。得服务器生成图片。。

  4. gently
    gently 2009-05-05

    仔细的看完了。纯CSS实现起来果然很有魅力。
    如果很后台程序结合起来,这种方式可能会造成很多的代码冗余,创建元素都变成了服务端处理,本来大概只需送出height,width,top,left这些。

    • 雪候鸟
      雪候鸟 2009-05-05

      恩,这倒是, 用js也不需要多余生成图片.
      呵呵,只是探讨一种新的方式..

Leave a Reply

Your email address will not be published. Required fields are marked *