svg path 跟随效果
插件特效
插件描述：svg path 跟随 背景图可以根据需求创意设计 比如企业发展历程等等
更新时间：2022-06-28 09:24:44
svg path 路径跟随
1 | <img src="path.jpg"> |
背景图根据需求设计，重点是设计图和路径相辅相承，考验创意， 实例只是动画效果的其中一种可能；
1 | <text font-family="microsoft yahei" text-shadow="0px 0px 3px #000" font-size="4rem" x="0" y="0" fill="#ffffff"> |
? 这段用于定义奔跑的图形和颜色，自定义； AI 画路径 存成SVG 复制
1 2 3 4 | <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> |
评论