C3小喇叭播放的动效

2019-06-19 1,583 阅读1分钟

1、UI切图

2、动画定义

.animation {
  animation: stepsV1 .8s steps(3) infinite;
  <!--兼容webkit-->
  -webkit-animation: stepsV1 .8s steps(3) infinite;
}
<!--兼容webkit-->
@-webkit-keyframes stepsV1{
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
@keyframes stepsV1{
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}