HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>语音助手</title>
</head>
<body>
<div class="dialog-container">
<div class="audio-animation">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>
</div>
<div class="dialog-container">
<div class="audio-animation">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
CSS部分：
<style type="text/css">
@keyframes yuying{
%{
height: %;
}
%{
height: %;
}
%{
height: %;
}
%{
height: %;
}
%{
height: %;
}
} .dialog-container{
width: 40px;
height: 40px;
margin: 100px auto;
border: 3px solid #0094de;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.dialog-container .audio-animation{
width: 26px;
height: 26px;
}
.audioPlay #one{
animation:yuying .6s infinite .15s;
-webkit-animation:yuying .6s infinite .15s;
}
.audioPlay #two{
animation:yuying .6s infinite .3s;
-webkit-animation:yuying .6s infinite .3s;
}
.audioPlay #three{
animation:yuying .6s infinite .45s;
-webkit-animation:yuying .6s infinite .45s;
}
.audioPlay #four{
animation:yuying .6s infinite .6s;
-webkit-animation:yuying .6s infinite .6s;
} #one,#two,#three,#four{
width:2px;
border-radius: 50px;
background-color: #0094de;
vertical-align: middle;
display: inline-block;
}
#one{
margin-left: 2px;
height: %;
}
#two{
height: %;
}
#three{
height: %;
}
#four{
height: %;
}
</style>
JS部分：
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.dialog-container').click(function(){
var childNode = $(this).children('.audio-animation');
if (childNode.hasClass('audioPlay')) {
childNode.removeClass('audioPlay');
}else{
childNode.addClass('audioPlay');
}
$(this).siblings().children('.audio-animation').removeClass('audioPlay');
})
})
</script>