.touxiang img{ border-radius:50%; top:30px; left:715px; position:absolute;} .touxiang:hover{ } <div class="touxiang"> <img src="image/20210505204333_81e88.jpg" height="91px" width="91px"> </div> 添加鼠标悬浮图片放大的效果,且动画过渡
时间: 2023-07-19 22:43:49 浏览: 46
您可以使用CSS3的transition属性和transform属性来实现鼠标悬浮图片放大的效果和动画过渡。以下是示例代码:
```
.touxiang img {
border-radius: 50%;
top: 30px;
left: 715px;
position: absolute;
transition: transform 0.3s ease-in-out;
}
.touxiang:hover img {
transform: scale(1.1);
}
```
在上面的代码中,我们使用transition属性来定义图片的动画过渡效果,设置transform属性来指定图片的缩放比例。当鼠标悬浮在图片上时,我们使用:hover伪类来定义鼠标悬浮时的样式,并设置transform的比例为1.1,实现图片的放大效果。同时,由于transition属性的存在,图片的放大过程会有一个平滑的动画效果。
您可以将上述代码添加到您的CSS文件中,并将其应用到HTML代码中的.touxiang img元素,即可实现鼠标悬浮图片放大的效果和动画过渡。