css怎么随着鼠标移动,利用CSS sprites制作随着鼠标移动的动画背景

网页设计中的背景图是至关重要的,在之前的文章《网页设计中的背景创意和发展趋势》也有为大家分享过网页设计中关于背景的设计以及发展趋势,一个优秀的背景图可以为你的网站增添不少的精彩。在浩大的互联网中,各种创意层出不穷,也许你在一些网站上看到的背景会随着鼠标的移动而移动,这是非常充满创意而且有趣的设计,你认为呢?今天就为大家分享下如何制作一个随着鼠标移动的动画背景效果。

在开始制作动画背景效果前,先为大家介绍下CSS sprites,中文名为:CSS雪碧或者CSS精灵。它是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。这种技术的好处就是可以减少你的网站的HTTP请求数量,是通过使用CSS background和background-position属性来渲染的,也就是说是在css中定义的,并不适用于标签。

CSS sprites示例

CSS雪碧的制作原理很简单,相信大家都知道,主要是制作一张背景图,图片里面包含a,a:hover,a:active各种状态下的图片,如果通过背景定位background-position来获取不同状态下相对应的图片。下面为示例:

一览众巅峰

CSS sprites demos, Make by:www.jiawin.com

制作动画背景解析与示例

之所以在上面为大家简单的介绍css雪碧,因为css雪碧不单单仅限于使用在图片上面,还可以结合jQuery来制作动画效果。在引入jQuery后,我们可以利用鼠标光标的位置,来确定不同的触发点,相对应的改变background-posit

你可能感兴趣的:(css怎么随着鼠标移动)