css简单音乐播放器 |css3 兼容火狐

秦青 css，discuz css路径配置，css input 字在底部，less css 中文教程，css 子元素最高高度，css背景颜色怎么变成蓝色，css3 兼容火狐 css简单音乐播放器 |css3 兼容火狐

首先，大家需要一个HTML页面来放置音乐播放器。代码如下：

<!DOCTYPE html>
<html>
<head>
<title>CSS音乐播放器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="player">
<audio src="music.mp3" controls></audio>
</div>
</body>
</html>

在上面的代码中，大家引用了一个CSS文件来设置音乐播放器的样式。接下来，大家就可以开始写CSS代码了。

首先，大家用CSS设置播放器的基本样式。代码如下：

#player {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
padding-top: 5px;
}

通过上述样式，大家将播放器固定在页面底部，并设置了背景色、文字颜色、居中等基本样式。

接着，大家为播放器的控件（上一曲、下一曲等）设置样式。代码如下：

#player audio {
width: 80%;
margin: 0 10%;
}
#player audio::-webkit-media-controls-enclosure {
display: none !important;
}
#player audio::-webkit-media-controls-panel {
background-color: #666 !important;
}
#player audio::-webkit-media-controls-play-button {
background-image: url(play.png) !important;
}
#player audio::-webkit-media-controls-pause-button {
background-image: url(pause.png) !important;
}
#player audio::-webkit-media-controls-volume-slider-container {
display: none !important;
}

上述样式中，“::-webkit-media-controls-enclosure”是用来隐藏默认的控件的，而其它样式则是用来自定义控件的样式。

最后，大家还可以用CSS来添加一些动效，让音乐播放器更加生动。例如，大家可以添加一个简单的旋转动画效果。代码如下：

#player audio {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

通过上述代码，大家给播放器添加了一个旋转动画，让用户感觉更加酷炫。当然，这只是一个简单的示例，如果你想让音乐播放器更加丰富多彩，还可以根据自己的需求进行调整。

综上所述，通过CSS大家可以简单地实现一个音乐播放器。只需要几行代码，就可以为网站增加更多的乐趣。相信这对于有一定CSS基础的人来说，不会太难吧。