数据结构
网络
关系数据库管理系统 (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 次浏览
广告