css点击播放音乐 |css中的滤镜效果

/*定义一个拥有背景图片的按钮*/
.play-btn {
width: 50px;
height: 50px;
background: url('play.png') no-repeat;
cursor: pointer;
}
/*在点击按钮时触发音乐播放*/
.play-btn:active {
background-image: url('pause.png');
}
.play-btn:active ~ audio {
display: inline-block;
}
/*隐藏音乐控件*/
audio {
display: none;
}

首先，大家需要定义一个按钮元素，并为其设置背景图片。这里大家使用了class名为.play-btn的元素。接着，为了让用户点击按钮时触发音乐播放，大家在该元素的:active伪类下设置新的背景图片，并添加一个 ~ 相邻兄弟选择器来选择与按钮后一个兄弟元素（即音乐控件的标签）同时出现的元素。当按钮被点击时，就可以根据 ~ 相邻兄弟选择器的规则，将音乐控件的display属性设置为inline-block，从而使其显示在页面上。

另外，需要注意的是，大家需要在CSS中将音乐控件的display属性设置为none，这样初始时它就会隐藏在页面中，等待被触发并显示出来。

通过以上的CSS代码，就可以简单地实现点击播放音乐的效果，给用户带来更好的音乐体验。