js实现鼠标放到图片的时候会有缓慢放大的动画效果怎么弄
时间: 2024-04-29 13:24:51 浏览: 93
jquery+css3实现的鼠标滑过图片向上弹出放大效果.zip
这个效果可以通过CSS中的transition属性实现。可以将图片容器的宽度和高度设置为原来的1.2倍,然后通过transition属性设置过渡效果,实现缓慢放大的动画效果。具体的代码实现如下:
HTML:
```
<div class="image-container">
<img src="your-image-src">
</div>
```
CSS:
```
.image-container {
width: 200px;
height: 200px;
overflow: hidden;
transition: all .5s ease-out;
}
.image-container:hover {
width: 240px;
height: 240px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
```
需要注意的是,这种缓慢放大的动画效果是CSS3动画,如果要支持到IE8,需要使用JavaScript来实现。
阅读全文