這篇文章給大家介紹如何在css中使用transition屬性，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)專注于銀州企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),電子商務(wù)商城網(wǎng)站建設(shè)。銀州網(wǎng)站建設(shè)公司,為銀州等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

css的三種引入方式

1.行內(nèi)樣式，最直接最簡(jiǎn)單的一種，直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

一、對(duì)transition屬性的認(rèn)識(shí)

1、transition 屬性是一個(gè)簡(jiǎn)寫屬性，可用于設(shè)置四個(gè)過(guò)渡屬性：
 

transition-property     過(guò)渡效果的 CSS 屬性的名稱（height、width、opacity等）。
transition-duration   完成過(guò)渡效果需要時(shí)間。
transition-timing-function     規(guī)定速度效果的速度曲線。
transition-delay          過(guò)渡效果何時(shí)開(kāi)始（延遲時(shí)間）。

注：如果 transition-duration屬性時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過(guò)渡效果。

2、漸變函數(shù)的值：

漸變函數(shù)是transition-timing-function；

其中貝塞爾曲線的預(yù)設(shè)值

    ease漸快，勻速，減慢cubic-bezier(0.25,0.1,0.25,1)
    ease-in漸快，勻速cubic-bezier(0.42,0,1,1)
    ease-out勻速，減慢cubic-bezier(0,0,0.58,1)
    ease-in-out和ease類似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)
    linear全程勻速cubic-bezier(0,0,1,1)

3、簡(jiǎn)寫方式：transition：css屬性名  過(guò)度時(shí)間  漸變函數(shù)值  延遲時(shí)間；

二、簡(jiǎn)單動(dòng)畫(huà)實(shí)例操作

1、先插入兩張圖片

<div class="A">
        <img src="img/吃藥.jpg" alt="">
        <img src="img/main_bg.jpg" alt="">
    </div>

2、給圖片設(shè)置樣式

<style>
        .A {
            margin: auto 100px;
            height: 400px;
            width: 600px;
            position: relative;
        }
        .A img:nth-child(1) {
            height: 300px;
            width: 300px;
            position: absolute;
        }
        .A img:nth-child(2) {
            height: 300px;
            width: 300px;
            position: absolute;
            transition: opacity 3s ease-in 2s;
        }
        .A img:nth-child(2):hover {
            opacity: 0;
        }
        img {
            height: 300px;
            width: 300px;
        }
        </style>

關(guān)于如何在css中使用transition屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

新聞名稱：如何在css中使用transition屬性
地址分享：http://www.aaarwkj.com/article0/pjcgio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站內(nèi)鏈、軟件開(kāi)發(fā)、靜態(tài)網(wǎng)站、App設(shè)計(jì)、網(wǎng)站維護(hù)

廣告

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