CSS實現多個音頻排放指的是，通過CSS樣式來控制網頁中多個音頻的播放和展示。這種方式可以讓網頁更加生動有趣，吸引用戶的注意力。
<code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS實現多個音頻排放</title>
<style>
.audio{
display: none;
}
.btn{
cursor: pointer;
padding: 0.5rem;
margin: 0.5rem;
border-radius: 0.25rem;
background-color: #5cdbd3;
color: #fff;
}
.btn:hover{
background-color: #379b97;
}
#audio1:checked ~ .music1{
display: block;
}
#audio2:checked ~ .music2{
display: block;
}
#audio3:checked ~ .music3{
display: block;
}
</style>
</head>
<body>
<input type="radio" name="audio" id="audio1">
<input type="radio" name="audio" id="audio2">
<input type="radio" name="audio" id="audio3">
<label class="btn" for="audio1">音頻1</label>
<label class="btn" for="audio2">音頻2</label>
<label class="btn" for="audio3">音頻3</label>
<audio src="music1.mp3" class="audio music1"></audio>
<audio src="music2.mp3" class="audio music2"></audio>
<audio src="music3.mp3" class="audio music3"></audio>
</body>
</html>
</code>上面的代碼中，首先通過CSS的display屬性來隱藏了所有的音頻標簽。然后通過設置多個radio按鈕和label標簽，來實現讓用戶觸發不同的音頻播放。最后通過CSS的~選擇器，根據當前被選中的radio按鈕來控制對應的音頻標簽的顯示。這樣就可以實現在同一頁面中展示多個音頻，用戶可以根據需要選擇不同的音頻來播放。
上一篇css實現帶圈數字
下一篇css實現動畫的方式