css3 实现鼠标放上去图片外框不变大，里面中心放大

最新推荐文章于 2021-11-23 16:25:43 发布

小弧y

最新推荐文章于 2021-11-23 16:25:43 发布

阅读量1.7k

点赞数 1

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/weixin_38128649/article/details/103093072

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>img-bigger</title>
    <style>
    #img-box{
        width: 500px;
        height: 500px;
/*目的为了框不变 里面变大*/
        overflow: hidden;
    }
    img{
        display: block;
        width: 100%;
        height: 100%;
/*放大的速度*/
        transition: all 1.2s;

    }
    img:hover{
/*放大的倍数 如果小于1 就是缩小 大于1就是放大*/
        transform: scale(1.2);
    }
    </style>
</head>
<body>

<div id="img-box"><img src="img/a3.jpg"></div>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小弧y

关注关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css3 实现鼠标放上去图片外框不变大，里面中心放大

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>img-bigger</title> <style> #img-box{ width: 500px; height: 500px;...
复制链接

扫一扫