css3帧动画
实现思路:
1.做逐帧的播放图片
2.通过css3的@keyframes属性来设置播放效果,必须设置0% 和100%位置时的图片定位位置,通过设置25%,50%
等位置的图片位置来进一步确定显示的效果
3.-webkit-animation:动画名字 1s steps(1) infinite
css代码如下:
@-webkit-keyframes m_voicePlay2{
0% {
background-position:0 0;
}
25% {
background-position:-30px 0;
}
50% {
background-position:-60px 0;
}
75% {
background-position:-90px 0;
}
100% {
background-position:-180px 0;
}
}
@keyframes m_voicePlay2 {
0% {
background-position: 0 0;
}
25% {
background-position: -30px 0;
}
50% {
background-position: -60px 0;
}
75% {
background-position: -90px 0;
}
100% {
background-position: -180px 0;
}
}
.m_voicePlay1{width:30PX;height:30PX;margin: 0 !important; position:absolute;right:10PX;top:8PX;background:url("../img/voice.png") no-repeat ;background-size:100% 100%;}
.m_voicePlay2{ background:url('../img/yuyin.png') no-repeat 0 0;-webkit-animation:m_voicePlay2 1s steps(1) infinite;background-size:120px 30px;}