首頁技術文章正文

使用CSS3實現(xiàn)過渡動畫效果【前端案例教程】

更新時間:2022年03月03日17時52分來源:傳智教育瀏覽次數(shù):

什么是過渡

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

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

transition: 要過渡的屬性花費時間運動曲線何時開始;

CSS3 過渡的使用

1.屬性：想要變化的 css 屬性，寬度高度背景顏色內外邊距都可以。如果想要所有的屬性都變化過渡，寫一個all 就可以。

2. 花費時間：單位是秒(必須寫單位) 比如 0.5s。

3. 運動曲線：默認是 ease (可以省略)。

4.何時開始：單位是秒(必須寫單位)可以設置延遲觸發(fā)時間默認是 0s (可以省略)。

CSS3過渡動畫

進度條案例

步驟：

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

- 給外層的bar 這個盒子設置邊框，寬高，圓角邊框

- 給里層的bar_in 設置初試的寬度，背景顏色，過渡效果

- 給外層的 bar 添加 hover事件，當觸發(fā)了hover事件讓里層的bar_in 來進行寬度的變化

代碼：

<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;
            /* 誰做過渡給誰加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

怎么用css3畫三角形？css繪制三角形圖文教程

CSS3的三種屬性選擇器介紹

css3漸變屬性怎么使用？C3漸變用法教程

傳智教育HTML&JS+前端培訓課程

上一篇：6種維護網(wǎng)站的方法【前端開發(fā)技術文章】 下一篇：有什么基礎才能學Vue？