css3帧动画

最新推荐文章于 2025-06-22 16:53:24 发布

奥特蛋_mm

最新推荐文章于 2025-06-22 16:53:24 发布

阅读量498

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43254676/article/details/83143903

本文详细介绍了如何使用CSS3的@keyframes属性实现帧动画，通过设置不同百分比位置的背景图片位置，达到逐帧播放的效果。代码示例展示了如何创建无限循环的帧动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;}