溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3如何實(shí)現(xiàn)過幾秒消失動(dòng)畫

發(fā)布時(shí)間：2021-12-16 14:35:58 來源：億速云 閱讀：305 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了css3如何實(shí)現(xiàn)過幾秒消失動(dòng)畫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

方法：1、用“@keyframes 名稱{99%{opacity:1;}100%{opacity:0;}}”語句設(shè)置元素消失動(dòng)畫；2、用“元素{animation-duration:時(shí)間}”語句設(shè)置動(dòng)畫元素的動(dòng)畫時(shí)間，時(shí)間過后元素就會(huì)消失。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，想要實(shí)現(xiàn)過幾秒消失的動(dòng)畫，需要利用animation屬性和@keyframes 規(guī)則來實(shí)現(xiàn)圖片出現(xiàn)幾秒后消失效果，通過 @keyframes 規(guī)則，您能夠創(chuàng)建動(dòng)畫。

創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動(dòng)畫過程中，您能夠多次改變這套 CSS 樣式。

以百分比來規(guī)定改變發(fā)生的時(shí)間，或者通過關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。

通過使用opacity屬性來控制元素消失樣式。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
          width:150px;
          height:100px;
            opacity:0;
            background-color:red;
            animation-name:fadenum;
            animation-duration:3s;
        }
        @keyframes fadenum{
          0%{opacity:1;}
          99%{opacity:1;}
          100%{opacity:0;}
}
    </style>
</head>
<body>
<div></div>
</body>
</html>

輸出結(jié)果：

css3如何實(shí)現(xiàn)過幾秒消失動(dòng)畫

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css3如何實(shí)現(xiàn)過幾秒消失動(dòng)畫”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手