css实现在鼠标放上去时图片从中心位置变大

源自:https://stackoverflow.com/questions/28726430/css-how-to-scale-an-image-from-the-center-instead-of-top-left

实现:鼠标放到图片上时,图片从中心位置变大,而不是从左上角为原点变大。

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>

猜你喜欢

转载自blog.csdn.net/qijingpei/article/details/76855826