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

PHOTO

Thu Apr 29 2021 07:58:23 GMT+0000 (Coordinated Universal Time)

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%;
    }
}

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

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

CSS

@ycljcfer

浏览器默认css样式清除浏览器默认css样式清除 CSS 文字装饰 -下划线 CSS 文字装饰 text-decoration & text-emphasis · Issue #103 · chokcoco/iCSS CSS设置文字与装饰线颜色分离text-decoration-color 与 color 分离 CSS文字和装饰线动画 CSS 文字装饰 text-decoration & text-emphasis CSS 文字装饰 text-decoration & text-emphasis · Issue #103 · chokcoco/iCSS CSS 文字装饰background模拟下划线 CSS 文字装饰 background模拟虚线 CSS 文字装饰-巧妙改变 background-size 与 background-position 实现文字 hover 动效 CSS 文字装饰-改变 background-position 实现文字 hover 动效(反向效果) CSS 文字装饰下划线变色效果的实现 CSS 传统方式实现直线路径动画 CSS 传统方式实现曲线路径动画 CSS Motion Path 实现直线路径动画 CSS Motion Path 实现波浪形路径动画 CSS Motion Path 实现曲线路径动画 CSS三角形的实现 CSS-offset-anchor 运动锚点利用 Motion Path 制作按钮点击撒点效果 Button Animation with CSS Offset Paths Button Animation with CSS Offset Paths 汽车地图行驶效果利用 Motion-Path 绘制路径动画 Notebook theme - FoldingText Theme demonstrating multiple header styles - FoldingText How to install a theme? - FoldingText

Browse more snippets >>