利用css3实现兔斯基动画效果

css3实现兔斯基动画效果: 图片是从网上找的,有的地方会有动作残留。 html代码: div id="warp">/div>css样式如下: #warp

css3实现兔斯基动画效果:
在这里插入图片描述
图片是从网上找的,有的地方会有动作残留。
html代码:

<div id="warp"></div>

css样式如下:

#warp{position: absolute;top: 50%;left:50%;transform: translate3d(-50%,-50%,0);background: url(img/tsj.png);background-position: 0 0;width: 165px;height: 200px;animation: move 1s infinite steps(7,end);
}
@keyframes move {from{background-position: 0 0;}to{background-position: -1152px 0;}
}

利用动画效果,挪动位置,创建关键帧,轻轻松松让图片动起来,一起来试试吧。