css3如何实现鼠标移入到图片上图片放大的效果

2025-09-27 14:55:18

1、在编辑器内新建一个index.html，用来学习今天的内容

2、在页面body区域新增一个div标签,在div标签内引入一张图片

css3如何实现鼠标移入到图片上图片放大的效果

3、在style标签内，给div标签和img标签加上基础样式

css3如何实现鼠标移入到图片上图片放大的效果

4、当时鼠标移入到图片上，使用css3transform属性放大图片，并且在图片标签上加上缓慢变大的效果

css3如何实现鼠标移入到图片上图片放大的效果

5、在浏览器中打开index.html，鼠标移入到图片，会发现图片缓慢变大

css3如何实现鼠标移入到图片上图片放大的效果

6、贴一下代码：

<!DOCTYPE html>

<html>

<head>

<title>css3如何实现鼠标移入到图片上图片放大的效果</title>

</head>

<style>

div{

width: 200px;

height: 200px;

overflow: hidden;

}

div img{

width: 100%;

transition: all 0.5s;

}

div img:hover{

transform: scale(1.2);

}

</style>

<body>

<div>

</div>

</body>

</html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。