css3怎么让一张图片的经过鼠标滑过之后右半边图片放大恢复 但是左半边不动
时间: 2024-02-21 17:00:07 浏览: 72
可以使用CSS3的`transform`属性配合`transition`属性来实现鼠标滑过图片右半边放大的效果,具体代码如下所示:
```css
/* 设置图片的容器大小 */
.img {
width: 400px;
height: 200px;
overflow: hidden;
position: relative;
}
/* 设置图片的大小及样式 */
.img img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out; /* 设置过渡效果 */
}
/* 鼠标滑过图片右半边放大效果 */
.img:hover img {
transform-origin: 100% 50%; /* 设置旋转中心点为右边中心 */
transform: scale(1.5); /* 图片右半边放大1.5倍 */
}
```
其中,`.img`用于设置图片的容器大小,`.img img`用于设置图片的大小及样式。在鼠标滑过图片时,使用`.img:hover img`选择器来设置图片的放大效果,并通过`transform-origin`属性来设置旋转中心点为右边中心,再使用`transform`属性的`scale()`方法来实现图片的放大。由于图片使用了绝对定位,因此可以通过`position`属性来控制图片的位置。
阅读全文