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源码, 一个独立页面的例子在这里

16 Comments

  1. 예스카지노
    예스카지노 August 26, 2020

    Blog commenting is still a useful way for building links. This article tells clearly that spam comments don’t work anymore as like as quality and meaningful comments.
    예스카지노

  2. 33카지노
    33카지노 April 17, 2020

    Ladbrokes and Betfair are two of the best betting sites in the UK that, according to resources, took wagers on almost everything baby related. There were bets on the gender of the baby, the weight of the baby and what the name of the little angel would be.

  3. Megadede
    Megadede December 29, 2019

    Interested students, you can directly look at the HTML source code, an example of a separate page is here.

  4. Megadede
    Megadede December 17, 2019

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

  5. Streamcomplet
    Streamcomplet November 29, 2019

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

  6. Mejortorrent
    Mejortorrent November 7, 2019

    It is owing to some far more basic fundamental principles which will determine your success or failure at anything you do in life.

  7. mejor torrent
    mejor torrent October 20, 2019

    You slowly move down the funnel as they take on better contracts from new virtual employers.

  8. maria
    maria October 20, 2019

    It is important to start something that you really like, because you will be spending a lot of time on it.

  9. zalukaj.ws
    zalukaj.ws July 2, 2019

    You might even consider using all the suggested programs and over time replace your existing income.

  10. altadefinizi.one
    altadefinizi.one June 19, 2019

    If you are unable to use a camcorder, you should also be able to use your webcam; however, you may be required to stay around your computer area.

  11. Megadede.com
    Megadede.com April 3, 2019

    If you enjoy the experience, you can then move on to creating longer online videos or ones that require additional work.

  12. super mario bros
    super mario bros October 2, 2018

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

  13. 荆棘
    荆棘 January 26, 2012

    我倒想尝试一下~

  14. reeze
    reeze June 11, 2009

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

  15. gently
    gently May 5, 2009

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

    • 雪候鸟
      雪候鸟 May 5, 2009

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

Leave a Reply

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