HTML+CSS实现鼠标滑过图片放大效果且还原
时间: 2023-11-18 08:04:19 浏览: 502
纯CSS鼠标滑过图片放大显示的相册效果.zip
可以使用CSS的`transform`属性和`transition`属性来实现鼠标滑过图片放大效果且还原。具体实现步骤如下:
1. 在CSS中设置图片的缩放比例(如1倍),并且设置`transition`属性,表示缩放过程需要动画效果。
```css
img {
width: 200px;
height: 200px;
transition: transform 0.2s ease;
}
```
2. 鼠标滑过图片时,使用`transform`属性将图片放大(如1.2倍)。
```css
img:hover {
transform: scale(1.2);
}
```
3. 鼠标移开时,将图片还原为原来的大小(即1倍)。
```css
img:hover {
transform: scale(1.2);
}
img {
width: 200px;
height: 200px;
transition: transform 0.2s ease;
}
img:hover {
transform: scale(1.2);
}
img:hover {
transform: scale(1);
}
```
这样,当鼠标滑过图片时,图片会放大1.2倍,并且有动画效果;鼠标移开时,图片会还原为原来的大小。
阅读全文