css音乐字幕,css3实现音乐动画播放【原创】

刚刚做了一个项目，涉及到音乐播放动画的效果，通过查找资料学习，最终实现了这一效果，还是满满的成就感，在这里就把实现的代码奉献给大家

先给大家看下效果图

第一步：首先写好HTML代码

是不是很简单呢

第二部：给代码中的类名，标签附加样式

#audio-btn {

position: absolute;

right: 0;

display: inline-block;

width: 30px;

height: 30px;

background: url(images/home/music_icon.png) no-repeat center center;

background-size: 30.5px 30.5px;

}

.audio-rotate {

-webkit-animation: rotating 1.2s linear infinite;

-moz-animation: rotating 1.2s linear infinite;

-o-animation: rotating 1.2s linear infinite;

animation: rotating 1.2s linear infinite

}

@-webkit-keyframes rotating {

from {

-webki