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{ 0%{ height: 0%; } 20%{ height: 50%; } 50%{ height: 100%; } 80%{ height: 50%; } 100%{ height: 0%; } } .dialog-container{ 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{ 26px; height: 26px; } .audioPlay #one{ animation:yuying 0.6s infinite 0.15s; -webkit-animation:yuying 0.6s infinite 0.15s; } .audioPlay #two{ animation:yuying 0.6s infinite 0.3s; -webkit-animation:yuying 0.6s infinite 0.3s; } .audioPlay #three{ animation:yuying 0.6s infinite 0.45s; -webkit-animation:yuying 0.6s infinite 0.45s; } .audioPlay #four{ animation:yuying 0.6s infinite 0.6s; -webkit-animation:yuying 0.6s infinite 0.6s; } #one,#two,#three,#four{ 2px; border-radius: 50px; background-color: #0094de; vertical-align: middle; display: inline-block; } #one{ margin-left: 2px; height: 50%; } #two{ height: 100%; } #three{ height: 70%; } #four{ height: 40%; } </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>