HTML5圓形音樂播放器可以為網(wǎng)站增添一份美感和互動性，而其實現(xiàn)代碼也并不復雜。下面來分享一下如何用HTML5實現(xiàn)圓形音樂播放器。
<!DOCTYPE html>
<html>
<head>
<title>圓形音樂播放器</title>
<meta charset="utf-8">
<style>
body{
background-color:#222;
color:#fff;
text-align:center;
}
.circular-ui{
display:inline-block;
width:200px;
height:200px;
border-radius:100px;
position:relative;
overflow:hidden;
}
.circular-ui audio{
position:absolute;
top:-110px;
left:-7px;
}
.circular-ui .circle{
width:100%;
height:100%;
border-radius:100px;
position:absolute;
top:0;
left:0;
transform:rotate(50deg);
clip:rect(0px,110px,200px,0px);
background-color:#f2f2f2;
}
.circular-ui .bars{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
clip:rect(0px,200px,200px,100px);
}
.circular-ui .bar{
width:20px;
height:150px;
position:absolute;
top:50px;
left:50px;
background-color:#e7e7e7;
transform-origin:bottom center;
transform:rotate(0deg);
animation: sound 1s linear infinite;
}
.circular-ui .bar:nth-child(1){
left:10px;
}
.circular-ui .bar:nth-child(2){
left:40px;
animation-delay:.1s
}
.circular-ui .bar:nth-child(3){
left:70px;
animation-delay:.2s
}
.circular-ui .bar:nth-child(4){
left:100px;
animation-delay:.3s
}
.circular-ui .bar:nth-child(5){
left:130px;
animation-delay:.4s
}
.circular-ui .bar:nth-child(6){
left:160px;
animation-delay:.5s
}
@keyframes sound{
0%{
height:0px;
transform:rotate(0deg);
}
100%{
height:150px;
transform:rotate(180deg);
}
}
</style>
</head>
<body>
<div class="circular-ui">
<div class="circle"></div>
<div class="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<audio src="music.mp3" controls loop></audio>
</div>
</body>
</html>以上就是使用HTML5實現(xiàn)圓形音樂播放器的代碼，其中使用了CSS的定位、旋轉(zhuǎn)、動畫等特性，將六根矩形條形成一個動感的音頻可視化效果，再搭配音樂播放器讓其具有實際的功能。相信通過閱讀以上代碼，大家也可以掌握HTML5圓形音樂播放器的實現(xiàn)要點。