資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用HTML和CSS建立動畫條？
概述
動畫條是使用HTML和CSS建立的圖形動畫條。動畫條的佈局使用HTML建立，條的樣式使用CSS製作。普通條可以正常建立，但我們需要建立帶有動畫的條，因此我們將使用CSS轉換動畫屬性使其成為動畫。我們將構建一個與音樂動畫條同步器相同的動畫條。
演算法
步驟1 − 在文字編輯器中建立一個HTML檔案，並在其中新增HTML基本結構。
步驟2 − 現在建立一個父div容器，其中包含動畫線條。
<div class="animatedLines"></div>
步驟3 − 在父div內建立一個div子容器。建立至少七個“div”以製作一個良好的動畫條，並將其類名新增到lines。
<div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div>
步驟4 − 現在建立一個style.css檔案，並將此檔案連結到HTML文件。
<link rel="stylesheet" href="style.css">
步驟5 − 在style.css檔案中設定HTML元素的樣式。
.animatedLines {
display: flex;
justify-content: center;
padding-top: 2rem;
}
.animatedLines .lines:nth-child(1) {
animation-delay: .1s;
background-color: rgb(141, 255, 88);
}
.animatedLines .lines:nth-child(2) {
animation-delay: .2s;
background-color: rgb(127, 253, 69);
}
.animatedLines .lines:nth-child(3) {
animation-delay: .3s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(4) {
animation-delay: .4s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(5) {
animation-delay: .3s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(6) {
animation-delay: .2s;
background-color: rgb(127, 253, 69);
}
.animatedLines .lines:nth-child(7) {
animation-delay: .1s;
background-color: rgb(102, 228, 43);
}
步驟6 − 透過定位子“div”容器的類名來製作這些線條的動畫。
.animatedLines .lines {
list-style: none;
width: 5px;
height: 10px;
margin: 0 4px;
animation: animatedBars .5s infinite alternate;
}
@keyframes animatedBars {
0% {
transform: scaleY(1);
}
25% {
transform: scaleY(1);
}
50% {
transform: scaleY(1);
}
100% {
transform: scaleY(6);
}
}
步驟7 − 動畫條已成功建立。
示例
在這個例子中，我們建立了一個動畫條。為此，我們建立了兩個檔案：index.html和style.css。index檔案包含頁面的佈局，style.css檔案包含頁面的樣式部分。
<html>
<head>
<title>animated bars</title>
<link rel="stylesheet" href="style.css">
<style>
.animatedLines {
display: flex;
justify-content: center;
padding-top: 2rem;
}
.animatedLines .lines:nth-child(1) {
animation-delay: .1s;
background-color: rgb(141, 255, 88);
}
.animatedLines .lines:nth-child(2) {
animation-delay: .2s;
background-color: rgb(127, 253, 69);
}
.animatedLines .lines:nth-child(3) {
animation-delay: .3s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(4) {
animation-delay: .4s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(5) {
animation-delay: .3s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(6) {
animation-delay: .2s;
background-color: rgb(127, 253, 69);
}
.animatedLines .lines:nth-child(7) {
animation-delay: .1s;
background-color: rgb(102, 228, 43);
}
.animatedLines .lines {
list-style: none;
width: 5px;
height: 10px;
margin: 0 4px;
animation: animatedBars .5s infinite alternate;
}
@keyframes animatedBars {
0% {
transform: scaleY(1);
}
25% {
transform: scaleY(1);
}
50% {
transform: scaleY(1);
}
100% {
transform: scaleY(6);
}
}
</style>
</head>
<body>
<h1 style="text-align: center;text-decoration: underline;color: green;">tutorialspoint.com</h1>
<div class="animatedLines">
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
</div>
</body>
</html>
下圖顯示了上述示例的輸出，它顯示了一些動畫線條，您可以在瀏覽器中即時看到。當用戶將此功能載入到瀏覽器中時，它會顯示動畫線條，看起來更具吸引力。
結論
動畫條的功能可以用作語音合成器的圖形介面。您還可以在許多應用程式中看到此元件，例如語音記錄器和DJ節拍同步器。上述示例中的主要部分是計時，我們透過增加條形的大小來設定動畫的計時。
更新於：2023年5月9日
961 次瀏覽
廣告