CSS自定义不规则的动画路径 offset-path

fern_ok

已于 2022-12-12 09:28:02 修改

阅读量567

点赞数 2

文章标签： css html javascript

于 2022-12-09 18:00:57 首次发布

原文链接：https://blog.csdn.net/weixin_41192489/article/details/115863073

版权

1，实现原理

通过css属性offset-path可以指定元素不规则的动画路径
动画元素需绝对定位 position: absolute;

2，不规则的动画路径参数获取方法

通过网站 http://svg.wxeditor.com/ 绘制好想要的不规则的动画路径后，按Ctrl+U可以看到路径的代码，将path标签的d属性的值复制到offset-path属性的path中即可！

3，完整范例代码

<template>
    <div>
        <span class="love_move">love</span>
        <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
            <g>
                <title>background</title>
                <rect fill="white" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
                <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
                </g>
            </g>
            <g>
                <title>Layer 1</title>
                <path id="svg_2"
                      d="m264.72273,137.28284c52.77378,-129.9431 259.54318,0 0,167.0697c-259.54318,-167.0697 -52.77378,-297.01281 0,-167.0697z"
                      stroke-width="1.5" stroke="red" fill="red"/>
            </g>
        </svg>
    </div>
</template>
<script>
    export default {}
</script>
<style scoped>
    .love_move {
        position: absolute;
        font-size: 20px;
        offset-path: path("m264.72273,137.28284c52.77378,-129.9431 259.54318,0 0,167.0697c-259.54318,-167.0697 -52.77378,-297.01281 0,-167.0697z");
        animation: move 6s linear infinite;
    }
 
    @keyframes move {
        100% {offset-distance: 100%;}
    }
</style>

————————————————
版权声明：本文为CSDN博主「朝阳39」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_41192489/article/details/115863073