六一了,做个简单特效。
说明:关于文章时效性问题,公众号是第一时效性的,会根据具体时间进行文章的发布,CSDN里面的文章可能稍有延迟,因为我是一般周末抽出点时间,在这里发布。如想获取第一手文章,请关注公众号。
实现原理:利用了火焰背景特效、textpath文字引用路径、路径移动特效和点击后的一个渐变。
动态文字特效文章还有:
文字路径移动特效:
知识点:
除了笔直地绘制一行文字以外, SVG 也可以根据 <path> 元素的形状来放置文字。只要在textPath元素内部放置文本,并通过其xlink:href属性值引用<path>元素,我们就可以让文字块呈现在<path>元素给定的路径上了。
如上,使用了textPath子标签时,需要写在text标签对儿之中。在defs定义好path,在textpath中,通过xlink:href="id"引用。同时使用animate定义了位移动画,动画控制的属性为startOffset,这里要注意。
这个与之前的一篇SVG_23_mpath标签_轨迹复用很相似,都是通过引用外部定义好的路径。
关键代码
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<text font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath" fill="url(#fire)">
六一儿童节快乐
<animate attributeName="startOffset" from="0" to ="830" begin="0s" dur="10s" repeatCount="indefinite"/>
</textPath>
</text>
至于点击后的一个渐变,使用的是animate控制透明度opactiy。
祝各位老朋友、大朋友、小朋友,六一快乐。
Xi说孔方兄认证