transform:scale() 可以实现按比例放大 或者 缩小功能。
trans IT ion 可以设置动画执行的时间，实现缓慢或者快速的执行动画，效果图如下：
源 码：
<!DOCTY PE ht ML >
<html>
<head>
< ;m eta charset="utf-8">
<title>css实现鼠标移入时的放大效果</title>
<style type="text/css">
div{
width: 200px;
h ei ght: 300px;
m arg in:0 auto;
mar gin -t op: 100px;
}
div img {
width: 100%;
height: 100%;
transition: all 0.6s; //设置动画执行的时间为0.6s
cursor: pointer;
}
div img:hover{
transform: scale(1.2); //设置图片按照比例放大1.2倍
}
</style>
</head>
<body>
<div>
<img src="images/unn am ed. jpg ">
</div>
</body>
</html>
- 图片溢出div时遮罩：
@H_ 777 _23@
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css实现鼠标移入时的放大效果</title>
<style type="text/css">
div{
width: 200px;
height: 300px;
margin:0 auto;
margin-top: 100px;
overflow: hidden; //图片超出div部分隐藏
}
div img{
width: 100%;
height: 100%;
transition: all 0.6s; //设置动画执行的时间为0.6s
cursor: pointer;
}
div img:hover{
transform: scale(1.3); //设置图片按照比例放大1.3倍
}
</style>
</head>
<body>
<div>
<img src="images/unnamed.jpg">
</div>
</body>
</html>
到此这篇关于CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码的 文章 就介绍到这了,更多相关css鼠标移入图片放大内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码 全部内容，希望文章能够帮你解决 CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201291