分析一下CSS怎样实现该动画功能(鼠标放在图片上,图片向左移动)

html-css054

分析一下CSS怎样实现该动画功能(鼠标放在图片上,图片向左移动),第1张

.hc_hot ul li:hover {

margin-left: -10px

}

鼠标移上.hc_hot ul li对应的元素后,触发hover状态,应用上面这条css,左边距变为-10px,达到向左移动的目的

首先你要知道要截取的图片在整张图片中的偏移量以及大小。然后:

<div style="width:wwwpxheight:hhhpxbackground:url(图片url) no-repeat -lllpx -tttpx"></div>

其中www是要截取的小图片的宽度,hhh则是高度;

lll是小图片的左边在大图片的偏移量,ttt则是上边的偏移量。

请注意负号不能省略!