CSS 3 過渡

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供沭陽網(wǎng)站建設(shè)、沭陽做網(wǎng)站、沭陽網(wǎng)站設(shè)計、沭陽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、沭陽企業(yè)網(wǎng)站模板建站服務(wù)，十載沭陽做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

=====================================================================================

過渡---一個元素在不同狀態(tài)之間進(jìn)行平滑的轉(zhuǎn)換，CSS 3 中使用transition屬性實(shí)現(xiàn)過渡效果。

transition ：過渡屬性  執(zhí)行時間  時間函數(shù) 延時時間；

時間函數(shù)---設(shè)置元素運(yùn)動的速度

(1)貝塞爾曲線  cubic-bezier(p1(x,y),p2(x,y))

預(yù)定義貝塞爾曲線：

ease(默認(rèn)值)

linear

ease-in

ease-out

ease-in-out

(2) steps()

step-start  //步數(shù)為一

step-end

=======================================================================================================================================================================================

示例一：

img：hover{
    transform: translate(600px);
}
img{
    transition:2s cubic-bezier(0.6,0.1,0.1,0.7);
}

示例二：

<style>
        div:hover img{
            transform:translate(300px);
        }
        .i01{
            transition:2s steps(3,start);
        }
        .i02{
            transition:2s steps(3,end);
        }
        .i03{
            transition:2s linear;
        }
    </style>

    <div>
        <img src="p_w_picpaths/caffe-1.jpg" alt="" class="i01"/><br/>
        <img src="p_w_picpaths/caffe-2.jpg" alt="" class="i02"/><br/>
        <img src="p_w_picpaths/caffe-3.jpg" alt="" class="i03"/>
    </div>

===========transition屬性的每一步都可以用單獨(dú)的屬性表示

    transition: all 2s linear 3s;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 3s;

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

本文標(biāo)題：CSS3過渡-transition-創(chuàng)新互聯(lián)
文章出自：http://aaarwkj.com/article26/deoejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、全網(wǎng)營銷推廣、建站公司、軟件開發(fā)、搜索引擎優(yōu)化、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)