資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 設計漸變球載入動畫？
漸變球載入動畫是一種流行且吸引人的視覺效果，用於吸引網站使用者。它是一個簡單的動畫，透過球體淡入淡出建立醒目的載入效果。
什麼是 CSS 中的漸變球載入動畫？
漸變球載入動畫是一種載入動畫，其中一系列圓圈或球體迴圈淡入淡出。它表示網頁上正在載入內容。這種型別的動畫通常用於網頁設計，以便在使用者等待內容載入時保持使用者的參與度和知情權。
動畫主要使用 CSS 關鍵幀動畫和偽元素來建立圓圈或球體。球體被設定為在不同的時間間隔內淡入淡出，以建立視覺上有趣的動畫效果。
在 CSS 中設計漸變球載入動畫的步驟
在 CSS 中設計漸變球載入動畫是一個簡單的過程；它包括建立 HTML 結構，然後使用 CSS 關鍵幀動畫和偽元素來建立動畫效果。在這裡，我們將學習以下在 CSS 中設計漸變球載入動畫的步驟。
步驟 1：建立 HTML 標記
要設計漸變球載入動畫，首先，我們需要建立一個 HTML 結構。這可以透過使用一個簡單的 div 容器來完成，該容器具有一個類名，用於在 CSS 中為動畫設定樣式。例如 -
<div class="my-loader"></div>
步驟 2：定義 CSS 樣式
在此步驟中，我們將為漸變球載入動畫定義 CSS 樣式。這可以透過使用關鍵幀來定義動畫，然後使用 animation 屬性將動畫應用於 div 容器來完成。例如 -
.my-loader {
position: relative;
width: 40px;
height: 40px;
margin: 0 auto;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
步驟 3：新增球體
要建立漸變球載入動畫，我們需要新增球體。這可以透過使用偽元素來完成。我們將使用 before 和 after 偽元素建立球體，並應用所需的樣式以建立淡入和淡出效果。例如 -
.fade-balls-loader:before,
.fade-balls-loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
}
步驟 4：微調動畫
新增球體後，我們透過調整時間、持續時間和緩動來微調動畫。這可以透過調整 animation-timing-function、animation-duration 和 animation-delay 屬性來完成。例如 -
.fade-balls-loader:before,
.fade-balls-loader:after{
animation: fade 1.5s ease-in-out infinite;
}
.fade-balls-loader:before {
animation-delay: 0.6s;
}
示例 1
帶有單個球體的漸變球載入動畫。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.my-loader {
position: relative;
margin:auto;
width: 40px;
height: 40px;
}
.my-loader:before,
.my-loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
animation: fade 1.5s ease-in-out infinite;
}
.my-loader:before {
animation-delay: 0.6s;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
</style>
</head>
<body>
<h3>Fade Ball Loader Animation with Single Ball</h3>
<div class="my-loader"></div>
</body>
</html>
在上面的示例中，我們建立了一個簡單的 HTML 標記，其中包含一個具有 my-loader 類的單個 div 元素。然後，我們為容器元素以及 :before 和 :after 偽元素定義了 CSS 樣式。之後，我們使用 animation 屬性將淡入動畫應用於球體，並使用 animation-delay 屬性設定第一個球體的延遲。最後，我們使用 @keyframes 規則定義了淡入動畫。
示例 2
帶有三個球體的漸變球載入動畫。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.my-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.ball {
width: 36px;
height: 36px;
margin: 0 4px;
border-radius: 50%;
opacity: 0;
animation: fade 1.5s ease-in-out infinite;
}
.ball-1 {
background-color: #00bfff;
animation-delay: 0.3s;
}
.ball-2 {
background-color: #ff7f50;
animation-delay: 0.6s;
}
.ball-3 {
background-color: #7fff00;
animation-delay: 0.9s;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
</style>
</head>
<body>
<h3>Fade Ball Loader Animation with Three Balls</h3>
<div class="my-loader">
<div class="ball ball-1"></div>
<div class="ball ball-2"></div>
<div class="ball ball-3"></div>
</div>
</body>
</html>
在上面的示例中，我們建立了一個簡單的 HTML 標記，其中包括四個 div 元素，這些元素具有 ball、ball-1、ball-2 和 ball-3 類，位於容器 div 內部。我們使用 display 屬性使容器元素成為彈性盒，並將球體對齊到中心。我們還設定了 height 和 background-color 屬性以建立載入動畫的背景。
結論
使用 CSS 設計漸變球載入動畫是為網站新增視覺趣味和參與度的簡單有效方法。透過給定的簡單步驟，我們可以建立獨特且吸引人的載入動畫，從而使網站使用者保持娛樂和參與。
265 次瀏覽
