<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>播放音乐</title>
<style>
/* 定义动画效果 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* 播放音乐框的样式 */
.audio-box {
display: inline-block;
padding: 20px;
background-color: #eee;
border-radius: 10px;
animation: pulse 2s infinite;
}
/* 音乐控件的样式 */
audio {
width: 100%;
}
</style>
</head>
<body>
<!-- 播放音乐框 -->
<div class="audio-box">
<h1>播放音乐</h1>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持 HTML5 音频播放。
</audio>
</div>
</body>
</html>Code here, thanks