HTML5 svg 自行车运动描边动画特效

当前位置:主页 > Html5库 > SVG > HTML5 svg 自行车运动描边动画特效
HTML5 svg 自行车运动描边动画特效
分享:

    插件介绍

    这是一款HTML5 svg 自行车运动描边动画特效。该特效使用很多SVG线条来绘制骑自行车的运动员图像,然后通过GSAP来制作SVG线条的描边动画,加上颜色的变化,构建出非常炫酷的效果。

    浏览器兼容性

    浏览器兼容性
    时间:12-11
    阅读:
简要教程

这是一款HTML5 svg 自行车运动描边动画特效。该特效使用很多SVG线条来绘制骑自行车的运动员图像,然后通过GSAP来制作SVG线条的描边动画,加上颜色的变化,构建出非常炫酷的效果。

SVG线条动画使用的是GSAP的TimelineMaxDrawSVGPlugin

一个自行车的SVG结构类似下面的样子:

<svg id="bike" >
  <g id="mainpaths" >
    <g id="wheelf" >
    </g>
    <g id="wheelb" >
    </g>
  </g>
</svg>                  
                

下面是该特效的一些截图效果:

HTML5 svg 自行车运动描边动画特效-1

HTML5 svg 自行车运动描边动画特效-2

HTML5 svg 自行车运动描边动画特效-3

该HTML5 svg 自行车运动描边动画特效的官方地址为:https://tympanus.net/codrops/2017/12/05/creative-svg-strokes-animation/