資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 建立波浪載入動畫？
在這篇文章中，我們將使用 CSS 建立一個波浪載入動畫。波浪載入動畫是一種帶有波浪效果的載入動畫。它是線上應用程式中指示進度的一種標準方式，可以透過指示正在載入內容來增強使用者體驗。製作 CSS 波浪載入動畫是一種基本技術，它使用 CSS 動畫和關鍵幀。透過設定動畫屬性和關鍵幀，您可以設計一個動態且美觀的波浪載入動畫，可以根據您的具體需求進行調整。
方法
有多種使用 CSS 建立波浪載入動畫的技術。以下三種方法比較流行：
使用 Div 元素
使用 SVG 路徑
現在讓我們詳細瞭解每種方法並舉例說明。
方法 1：使用 `Div 元素`
建立波浪載入動畫的第一種方法是使用 `Div 元素`。這涉及建立一系列 div 元素，並使用 transform 和 translate 屬性對其進行動畫處理，以產生波浪效果。
在這裡，我們將透過一個示例來實現這種方法：
<!DOCTYPE html>
<html>
<head>
<title>Wave Loader using CSS and Div Elements</title>
<style>
.wave-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wave-loader div {
width: 20px;
height: 60px;
background-color: #0077ff;
margin: 0 5px;
border-radius: 50% 50% 0 0;
transform-origin: bottom;
animation: wave 1s ease-in-out infinite;
}
.wave-loader div:nth-child(2) {
animation-delay: -0.4s;
}
.wave-loader div:nth-child(3) {
animation-delay: -0.2s;
}
@keyframes wave {
0% {
transform: scaleY(0.4);
}
50% {
transform: scaleY(1);
}
100% {
transform: scaleY(0.4);
}
}
</style>
</head>
<body>
<div class="wave-loader">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
方法 2：使用 `SVG 路徑`
建立波浪載入動畫的第二種方法是使用 `SVG 路徑`。這涉及建立一系列 SVG 路徑，並使用 stroke-dasharray 和 stroke-dashoffset 屬性對其進行動畫處理，以獲得波浪效果。
示例
在這裡，我們將透過一個示例來實現這種方法：
<!DOCTYPE html>
<html>
<head>
<title>Wave Loader using CSS and SVG Paths</title>
<style>
.wave-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wave-loader svg {
width: 100px;
height: 60px;
}
.wave-loader path {
stroke: #0077ff;
stroke-width: 3;
stroke-dasharray: 120;
stroke-dashoffset: 0;
animation: wave 1s ease-in-out infinite;
}
.wave-loader path:nth-child(2) {
animation-delay: -0.4s;
}
.wave-loader path:nth-child(3) {
animation-delay: -0.2s;
}
@keyframes wave {
0% {
stroke-dashoffset: 0;
}
50% {
stroke-dashoffset: 60;
}
100% {
stroke-dashoffset: 120;
}
}
</style>
</head>
<body>
<div class="wave-loader">
<svg viewBox="0 0 100 60">
<path d="M0 30 Q 20 10 40 30 T 80 30" />
<path d="M0 30 Q 20 50 40 30 T 80 30" />
<path d="M0 30 Q 20 70 40 30 T 80 30" />
</svg>
</div>
</body>
</html>
結論
有多種方法可以使用 CSS 建立波浪載入動畫，包括 div 元素、SVG 路徑和漸變。每種方法都有其優缺點，具體取決於您的特定設計目標和需求。
div 元素方法易於應用和調整，並且可以用來建立各種波浪效果。SVG 路徑方法更復雜，但它可以更精確地控制動畫，並且適合建立更復雜的波形。漸變方法是最簡單的三種方法之一，但它仍然可以有效，並且如果您需要一個快速而簡單的解決方案，它是一個不錯的選擇。
更新於： 2023年3月24日
636 次瀏覽
廣告