CSS：实现图片缩放的方式

方法一：图片在页面中以背景图的方式出现

html代码：

<div class="sf-panel">
    <div class="sf-div">
        <p>图片是背景图</p>
    </div>
</div>

css代码：

.sf-panel{
    overflow: hidden;
    width:100%;
    height:100%;
    .img{
        width:100%;
        height:100%;
        background-size:100% 100%;
        transition: all 0.7s ease;
        &:hover{
            background-size:105% 105%;
            transition: all 0.7s ease;
        }
    }
}

鼠标放上去之后，图片在0.7s的时间内放大至原先的1.05倍，鼠标移出，图片恢复；

方法二：图片在页面中以元素存在，即img

html代码:

<div class="sf-panel">
    <img src="xxx.png"/>
</div>

css代码：

.sf-panel{
    overflow: hidden;
    width:100%;
    height:100%;
    .img{
        width:100%;
        height:100%;
        transform: scale(1.0,1.0);
        -ms-transform:scale(1.0,1.0);
        -moz-transform:scale(1.0,1.0);
        -webkit-transform:scale(1.0,1.0);
        -o-transform:scale(1.0,1.0);
        -webkit-transition: transform 0.7s ease;
        transition: transform 0.7s ease;
        
        &:hover{
            transform: scale(1.05,1.05);
            -ms-transform:scale(1.05,1.05);
            -webkit-transform:scale(1.05,1.05);
            -o-transform:scale(1.05,1.05);
            -webkit-transition: transform 0.7s ease;
            transition: transform 0.7s ease;
        }
    }
}

鼠标放上去之后，图片在0.7s的时间内放大至原先的1.05倍，鼠标移出，图片恢复；

日常记录

转载于:https://www.cnblogs.com/yiyiboy-core/p/9928705.html