search

349989153 / 349989153.github.io

My personal blog.
0 stars 0 forks source link

gif、sprite、animate相关 #24

Open 349989153 opened 2 years ago

349989153 commented 2 years ago

sprite转gif：

https://is.si/animator/

349989153 commented 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;
}

hua2

349989153 commented 2 years ago

gif转sprite：

https://onlinegiftools.com/convert-gif-to-sprite-sheet