溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了怎么使用css快速創建3點加載動畫，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
直接上代碼：
<!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>效果如下圖：
下面介紹兩個關鍵屬性：
CSS3 animation（動畫） 屬性
語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 animation-name：指定要綁定到選擇器的關鍵幀的名稱 animation-duration：動畫指定需要多少秒或毫秒完成 animation-timing-function：設置動畫將如何完成一個周期 animation-delay：設置動畫在啟動前的延遲間隔。 animation-iteration-count：定義動畫的播放次數。 animation-direction：指定是否應該輪流反向播放動畫。 animation-fill-mode：規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 animation-play-state：指定動畫是否正在運行或已暫停。 initial：設置屬性為其默認值。 inherit：從父元素繼承屬性。
CSS3 @keyframes 規則
使用@keyframes規則可以創建動畫。創建動畫是通過逐步改變從一個CSS樣式設定到另一個。
在動畫過程中，可以更改CSS樣式的設定多次。指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。
0％是開頭動畫，100％是當動畫完成。為了獲得最佳的瀏覽器支持，應該始終定義為0％和100％的選擇器。
注: 使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫。
語法：@keyframes animationname {keyframes-selector {css-styles;}}
值 animationname：必需的，定義animation的名稱。 keyframes-selector：必需的，動畫持續時間的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 注意：可以用一個動畫keyframes-selectors。 css-styles：必需的，一個或多個合法的CSS樣式屬性。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么使用css快速創建3點加載動畫”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
