css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)

简介: css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)

实现原理

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

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

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

完整范例代码

<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>


目录
相关文章
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
8天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
14天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
16 3
|
13天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
27 0
JS配合CSS3实现动画和拖动小星星小Demo
|
28天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
12 1
|
1月前
|
前端开发
CSS样式规则
CSS样式规则。
23 2
|
2月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
41 5
|
2月前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
24 1
|
2月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
2月前
|
前端开发
CSS动画霓虹灯闪烁效果
CSS动画霓虹灯闪烁效果