CSS3實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果【前端技術(shù)文章】

更新時(shí)間:2022-03-04 來(lái)源:黑馬程序員瀏覽量:

什么是過(guò)渡

過(guò)渡(transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動(dòng)畫(huà)或JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

過(guò)渡動(dòng)畫(huà)：是從一個(gè)狀態(tài) 漸漸的過(guò)渡到另外一個(gè)狀態(tài)可以讓我們頁(yè)面更好看，更動(dòng)感十足，雖然低版本瀏覽器不支持(ie9以下版本) 但是不會(huì)影響頁(yè)面布局。過(guò)渡動(dòng)畫(huà)我們現(xiàn)在經(jīng)常和 :hover選擇器一起搭配使用。
語(yǔ)法：

transition: 要過(guò)渡的屬性花費(fèi)時(shí)間運(yùn)動(dòng)曲線(xiàn)何時(shí)開(kāi)始;

CSS3 過(guò)渡的使用

1.屬性：想要變化的 css 屬性，寬度高度背景顏色內(nèi)外邊距都可以。如果想要所有的屬性都變化過(guò)渡，寫(xiě)一個(gè)all 就可以。

2. 花費(fèi)時(shí)間：單位是秒(必須寫(xiě)單位) 比如 0.5s。

3. 運(yùn)動(dòng)曲線(xiàn)：默認(rèn)是 ease (可以省略)。

4.何時(shí)開(kāi)始：?jiǎn)挝皇?秒(必須寫(xiě)單位)可以設(shè)置延遲觸發(fā)時(shí)間默認(rèn)是 0s (可以省略)。

CSS3過(guò)渡動(dòng)畫(huà)

進(jìn)度條案例

步驟：

- 創(chuàng)建兩個(gè)div的盒子，屬于的嵌套關(guān)系，外層類(lèi)名叫 bar，里層類(lèi)名叫 bar_in

- 給外層的bar 這個(gè)盒子設(shè)置邊框，寬高，圓角邊框

- 給里層的bar_in 設(shè)置初試的寬度，背景顏色，過(guò)渡效果

- 給外層的 bar 添加 hover事件，當(dāng)觸發(fā)了hover事件讓里層的bar_in 來(lái)進(jìn)行寬度的變化

代碼：

<head>
    ...
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 誰(shuí)做過(guò)渡給誰(shuí)加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

猜你喜歡：

css3結(jié)構(gòu)偽類(lèi)選擇器詳細(xì)介紹

CSS3盒子模型邊框怎樣實(shí)現(xiàn)圓角效果？

CSS3顏色不透明度的設(shè)置方法【web前端】

黑馬程序員Html5+Css3由淺入深視頻教程下載

黑馬程序員前端高級(jí)軟件工程師培訓(xùn)

上一篇：自定義標(biāo)記有什么作用？開(kāi)發(fā)自定義標(biāo)記的步驟 下一篇：什么是模塊化？為什么要進(jìn)行模塊化開(kāi)發(fā)？