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>


目录
相关文章
|
29天前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
54 31
|
2月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
114 58
|
14天前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
32 6
|
24天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
51 7
|
29天前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
29 6
|
1月前
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
54 5
|
29天前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
23 2
|
29天前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总,一共包含126种加载动画效果,不同样式不同图案,简单实用,一览包含所有,会让你在等待的过程中,体验视觉盛宴,给用户不一般的加载体验,欢迎下载试试!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
27 2
|
1月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。