怎么使用css快速創(chuàng)建3點(diǎn)加載動(dòng)畫

發(fā)布時(shí)間：2021-08-25 15:44:48 來源：億速云閱讀：149 作者：小新欄目：web開發(fā)

這篇文章主要介紹了怎么使用css快速創(chuàng)建3點(diǎn)加載動(dòng)畫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

直接上代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: black;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .dot1, .dot2, .dot3 {
            background: #fff;
            width: 15px;
            height: 15px;
            border:double;
            border-color:black;
            border-radius: 50%;
            margin: 10px;
        }

        .dot1 {
            animation: jump 1.6s -0.32s linear infinite;
            background: #4B0082;
        }
        .dot2 {
            animation: jump 1.6s -0.16s linear infinite;
            background: #B22222;
        }
        .dot3 {
            animation: jump 1.6s linear infinite;
            background: #006400;
        }

        @keyframes jump {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            } 40% {
                  -webkit-transform: scale(2.0);
                  transform: scale(2.0);
              }
        }
    </style>
</head>
<body>
<div class="dot1"> </div>
<div class="dot2"></div>
<div class="dot3"></div>
</body>

</html>

效果如下圖：

怎么使用css快速創(chuàng)建3點(diǎn)加載動(dòng)畫

下面介紹兩個(gè)關(guān)鍵屬性：

CSS3 animation（動(dòng)畫）屬性

語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值 
animation-name：指定要綁定到選擇器的關(guān)鍵幀的名稱
animation-duration：動(dòng)畫指定需要多少秒或毫秒完成
animation-timing-function：設(shè)置動(dòng)畫將如何完成一個(gè)周期
animation-delay：設(shè)置動(dòng)畫在啟動(dòng)前的延遲間隔。
animation-iteration-count：定義動(dòng)畫的播放次數(shù)。
animation-direction：指定是否應(yīng)該輪流反向播放動(dòng)畫。
animation-fill-mode：規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式。
animation-play-state：指定動(dòng)畫是否正在運(yùn)行或已暫停。
initial：設(shè)置屬性為其默認(rèn)值。
inherit：從父元素繼承屬性。

CSS3 @keyframes 規(guī)則

使用@keyframes規(guī)則可以創(chuàng)建動(dòng)畫。創(chuàng)建動(dòng)畫是通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。

在動(dòng)畫過程中，可以更改CSS樣式的設(shè)定多次。指定的變化時(shí)發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。

0％是開頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。為了獲得最佳的瀏覽器支持，應(yīng)該始終定義為0％和100％的選擇器。

注: 使用animation屬性來控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫。

語法：@keyframes animationname {keyframes-selector {css-styles;}}

值
animationname：必需的，定義animation的名稱。
keyframes-selector：必需的，動(dòng)畫持續(xù)時(shí)間的百分比。
合法值：
0-100%
from (和0%相同)
to (和100%相同)
注意：可以用一個(gè)動(dòng)畫keyframes-selectors。
css-styles：必需的，一個(gè)或多個(gè)合法的CSS樣式屬性。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用css快速創(chuàng)建3點(diǎn)加載動(dòng)畫”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

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

怎么使用css快速創(chuàng)建3點(diǎn)加載動(dòng)畫

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽