CSS样式代码:

一键复制到剪贴板 #mySprite { background-image: url('images/未命名.png'); width: 84px; height: 84px; animation: myAnimation 1.33s steps(1) infinite; }

keyframe动画代码:

一键复制到剪贴板 @keyframes myAnimation { 0% { background-position: 0px 0px; } 2.56% { background-position: -84px 0px; } 5.13% { background-position: -168px 0px; } 7.69% { background-position: -252px 0px; } 10.26% { background-position: -336px 0px; } 12.82% { background-position: -420px 0px; } 15.38% { background-position: -504px 0px; } 17.95% { background-position: -588px 0px; } 20.51% { background-position: -672px 0px; } 23.08% { background-position: -756px 0px; } 25.64% { background-position: -840px 0px; } 28.21% { background-position: -924px 0px; } 30.77% { background-position: -1008px 0px; } 33.33% { background-position: -1092px 0px; } 35.90% { background-position: -1176px 0px; } 38.46% { background-position: -1260px 0px; } 41.03% { background-position: -1344px 0px; } 43.59% { background-position: -1428px 0px; } 46.15% { background-position: -1512px 0px; } 48.72% { background-position: -1596px 0px; } 51.28% { background-position: -1680px 0px; } 53.85% { background-position: -1764px 0px; } 56.41% { background-position: -1848px 0px; } 58.97% { background-position: -1932px 0px; } 61.54% { background-position: -2016px 0px; } 64.10% { background-position: -2100px 0px; } 66.67% { background-position: -2184px 0px; } 69.23% { background-position: -2268px 0px; } 71.79% { background-position: -2352px 0px; } 74.36% { background-position: -2436px 0px; } 76.92% { background-position: -2520px 0px; } 79.49% { background-position: -2604px 0px; } 82.05% { background-position: -2688px 0px; } 84.62% { background-position: -2772px 0px; } 87.18% { background-position: -2856px 0px; } 89.74% { background-position: -2940px 0px; } 92.31% { background-position: -3024px 0px; } 94.87% { background-position: -3108px 0px; } 97.44% { background-position: -3192px 0px; } 100.00% { background-position: -3276px 0px; } }

预览背景颜色: