CSS属性background-position-y实现动画

CSS属性background-position-y实现动画

引言

background-position-y属性用于设置初始状态时背景图片在垂直方向的位置，这个位置相对于通过background-origin定义的背景层原点进行定位，详见MDN 文档。

今天要分享的是如何利用background-position-y属性实现简单的动画，源图是静态图片。

CSS效果

效果如下

实例代码

class animate {
   
  constructor(dom) {
   
    this.element = dom;
    this.timer_over = null;
    this.timer_leave = null;
    this.period = 30;
    this.step = 128;
    this.imgLength = -3228;
    this.init();