Open 349989153 opened 2 years ago
sprite动起来的一个例子:
@keyframes hua2-h {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -2695px;
}
}
@keyframes hua2-v {
0% {
background-position-y: 0px;
}
100% {
background-position-y: -350px;
}
}
.sprite-hua2 {
--dur: 1;
--col: 11;
--row: 2;
background-image: url(assets/hua2.png);
background-size: 2695px 350px;
width: 245px;
height: 175px;
animation: hua2-h calc((var(--dur) / var(--row)) * 1s) steps(var(--col)) infinite, hua2-v calc(var(--dur) * 1s) steps(var(--row)) infinite;
}
sprite转gif:
https://is.si/animator/