css声音播放的动画 |css3 字体阴影效果

html .css?v=，html css制作首页，jquery判断存在css样式，css样式搜索框代码，html 让图片水平居中 css，css弦乐的控制器，css3 字体阴影效果 css声音播放的动画 |css3 字体阴影效果

/* 定义声音图片 */
.sound-icon{
width: 30px;
height: 30px;
background-image: url(sound-icon.png);
background-size: 100% 100%;
}
/* 定义动画播放声音 */
@keyframes play-sound{
0% {
transform: scale(1.0);
box-shadow: none;
}
50% {
transform: scale(1.2);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
100% {
transform: scale(1.0);
box-shadow: none;
}
}
/* 定义播放声音效果 */
.sound-icon.play{
animation: play-sound 0.5s ease-in-out;
animation-fill-mode: forwards;
}

上述代码中，通过定义声音图片样式，设置声音播放的图片，并设置它的大小和背景图像大小。然后通过@keyframes定义播放声音的动画，其效果是通过定义不同百分比时，图片的大小和阴影的变化。通过.sound-icon.play类，将播放声音效果应用到声音图片上，实现声音播放效果。