css3鼠标滑过图片放大后恢复 怎么只让一半的图片进行放大,鼠标离开恢复 代码怎么写
时间: 2024-02-21 15:59:55 浏览: 23
可以使用CSS3的`transform`属性配合`transition`属性来实现鼠标滑过图片放大的效果,具体代码如下所示:
```css
/* 设置图片的初始大小 */
.img {
width: 200px;
height: 200px;
overflow: hidden;
}
/* 鼠标滑过图片放大效果 */
.img:hover img {
transform: scale(1.5); /* 图片放大1.5倍 */
transition: transform 0.5s ease-in-out; /* 设置过渡效果 */
}
/* 只让一半的图片进行放大 */
.img:hover img {
transform: scale(1.5, 1); /* 图片水平方向放大1.5倍,垂直方向不变 */
}
/* 鼠标离开图片恢复原大小 */
.img img {
transition: transform 0.5s ease-in-out; /* 设置过渡效果 */
}
.img img:hover {
transform: scale(1); /* 图片恢复原大小 */
}
```
其中,`.img`用于设置图片的容器大小,`.img img`用于设置图片的大小及样式。在鼠标滑过图片时,使用`.img:hover img`选择器来设置图片的放大效果,并通过`transform`属性的`scale()`方法来实现图片的放大。若要只让一半的图片进行放大,可以在`scale()`方法中设置水平方向放大1.5倍,垂直方向不变。在鼠标离开图片时,使用`.img img:hover`选择器来设置图片恢复原大小的效果。