CSS:實現圖片縮放的方式

方法一:圖片在頁面中以背景圖的方式出現css

html代碼:html

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

css代碼:web

.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倍,鼠標移出,圖片恢復;spa

方法二:圖片在頁面中以元素存在,即imgcode

html代碼:orm

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

css代碼:htm

.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倍,鼠標移出,圖片恢復;blog

平常記錄圖片

相關文章
相關標籤/搜索