CSS Motion Path 实现波浪形路径动画

PHOTO EMBED

Thu Apr 29 2021 07:58:23 GMT+0000 (UTC)

Saved by @ycljcfer

div {
    // 只改变运动路径,其他保持一致
    offset-path: path("M 0 0 L 100 0 L 200 0 L 300 100 L 400 0 L 500 100 L 600 0 L 700 100 L 800 0");
    animation: move 2000ms infinite alternate linear;
}
@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
content_copyCOPY

https://github.com/chokcoco/iCSS/issues/113