svg path 跟随效果

所属分类:其他-动画效果

 8103  28  查看评论 (0)
分享到微信朋友圈
X
svg path 跟随效果 ie兼容12

更新时间:2022-06-28 09:24:44

svg path 路径跟随

<img src="path.jpg">

背景图根据需求设计,重点是设计图和路径相辅相承,考验创意, 实例只是动画效果的其中一种可能;

<text font-family="microsoft yahei" text-shadow="0px 0px 3px #000" font-size="4rem" x="0" y="0" fill="#ffffff">

? 这段用于定义奔跑的图形和颜色,自定义; AI 画路径 存成SVG 复制 

<text font-family="microsoft yahei" text-shadow="0px 0px 3px #000" font-size="4rem" x="0" y="0" fill="#ffffff">? 这段用于定义奔跑的图形和颜色,自定义; AI 画路径 存成SVG 复制 <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1768 1846"  xml:space="preserve">      <text font-family="microsoft yahei" text-shadow="0px 0px 3px #000"   font-size="4rem" x="0" y="0"  fill="#ffffff">?        <animateMotion path="M128.9,296.8h1498.9c30.7,0,55.8,25.1,55.8,55.7v265.9c0,30.6-25.1,55.7-55.8,55.7l-1484.5-1l0,0 c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9h-2.5c30.7,0,55.8,25.1,55.8,55.7v265.9 c0,30.6-25.1,55.7-55.8,55.7H155.4l0,0c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9" ; stroke-dashoffset: 0; begin="0s" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>      </text>
<path d="M128.9,296.8h1498.9c30.7,0,55.8,25.1,55.8,55.7v265.9c0,30.6-25.1,55.7-55.8,55.7l-1484.5-1l0,0 c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9h-2.5c30.7,0,55.8,25.1,55.8,55.7v265.9 c0,30.6-25.1,55.7-55.8,55.7H155.4l0,0c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9"
    stroke="#f00" opacity="0" stroke-width="1" fill="none"></path>
</svg>


相关插件-动画效果

html5酷炫购物车结算动画特效

动画效果蛮好可以学习
  动画效果
 31102  343

按钮点击水波纹效果插件ripple.js

轻量级按钮点击水波纹效果,支持所有块级标签,使用非常简单。
  动画效果
 47485  528

bezie curve 曲线动画

bezie curve 曲线动画
  动画效果
 33353  417

Google Doodle粘土动画

Google Doodle粘土动画
  动画效果
 34251  375

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复