CSS3實現圖片漸入效果

很多網站都有那種圖片漸入的效果，如：http://www.mi.com/minote/，這種效果用css3和一些js實現起來特別簡單。

拿我之前做的頁面來說一下怎么利用css3來實現圖片漸入效果。

下面是頁面中的一段html：

<div class="features">
    <div class="container">
        <div class="inner feature">
            <div class="content">
                <h2 class="title"><img src="./imgs/title1.png" alt=""/></h2>
                <p class="text">256位SSL加密安全連接，手機短信驗證、谷歌兩步驗證、資金密碼、郵箱驗證四重驗證保障安全，錢包分布式離線冷存儲</p>
            </div>
            <img class="icon" src="./imgs/feature-icon1.png" alt=""/>
        </div>
    </div>
    <div class="container middle">
        <div class="inner feature">
            <div class="content">
                <h2 class="title"><img src="./imgs/title1.png" alt=""/></h2>
                <p class="text">256位SSL加密安全連接，手機短信驗證、谷歌兩步驗證、資金密碼、郵箱驗證四重驗證保障安全，錢包分布式離線冷存儲</p>
            </div>
            <img class="icon" src="./imgs/feature-icon2.png" alt=""/>
        </div>
    </div>
    <div class="container">
        <div class="inner feature">
            <div class="content">
                <h2 class="title"><img src="./imgs/title1.png" alt=""/></h2>
                <p class="text">256位SSL加密安全連接，手機短信驗證、谷歌兩步驗證、資金密碼、郵箱驗證四重驗證保障安全，錢包分布式離線冷存儲</p>
            </div>
            <img class="icon" src="./imgs/feature-icon3.png" alt=""/>
        </div>
    </div>
</div>

首先，需要先定位圖片，把圖片定位在漸入后最終停留的位置：

.feature .icon {
	position: absolute;
	top: 100px;
}

接着，利用css3的transform屬性和translate()方法實現圖片的偏移，還有就是將圖片透明度設為0(即完全透明)：

.feature .icon {
    position: absolute;
    top: 100px;
    transform: translate3d(0, 0, 150px);
    -ms-transform: translate3d(0, 150px, 0);
    -webkit-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    opacity: 0;
}

這邊需要加上各瀏覽器的前綴來兼容一些低版本瀏覽器。這些屬性和方法的具體用法這邊就細講了。

然后，要用到的是css3的transition屬性：

.feature .icon {
    position: absolute;
    top: 100px;
    transform: translate3d(0, 0, 150px);
    -ms-transform: translate3d(0, 150px, 0);
    -webkit-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    opacity: 0;
    transition: transform 1s ease 0s, opacity 1s ease 0s;
    -moz-transition: -moz-transform 1s ease 0s, opacity 1s ease 0s;
    -webkit-transition: -webkit-transform 1s ease 0s, opacity 1s ease 0s;
    -o-transition: -o-transform 1s ease 0s, opacity 1s ease 0s;
    -ms-transition: -ms-transform 1s ease 0s, opacity 1s ease 0s;
}

transition屬性是一個過渡屬性，當元素從一種樣式變換為另一種樣式時為元素添加效果。

到這還沒有效果。我們要達到的效果是：當網頁往下滾動，圖片出現或將要出現在視窗時，我們來觸發這個過渡效果，就像大家看到的下面這張圖片一樣。這個做法就像圖片的惰性加載，圖片還沒出現在視窗中時，先不加載，出現時再去加載圖片，這樣的效果就是用戶訪問頁面的速度提升了。

刷新評論 刷新頁面 返回頂部