实现:鼠标放到图片上时,图片从中心位置变大,而不是从左上角为原点变大。
img {
width: 100%; max-width: 100%;
}
div {
position: absolute; left: 20%; top: 20%;
width: 250px;
transition: all 2s ease-in-out;//这里表示动画的时间为2s
}
div:hover {//hover表示鼠标移动到上面时,触发这个事件
transform: scale(2,2);//transform表示变换,scale表示范围、大小,这是长宽都变为2倍的实现代码。
}
另一部分代码:
<div>
<a href="http://photobucket.com/images/cat" target="_blank">
<img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif"/>
</a>
</div>