资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

svg动画之动态描边效果

1、首先先做一个简单的线一点一点画出来的效果,主要使用svg中的“strokeDasharray”、“strokeDashoffset”属性,通过css3中的transtion改变strokeDashoffset来实现动画。

南关网站建设公司创新互联,南关网站设计制作,有大型网站制作公司丰富经验。已为南关上千家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的南关做网站的公司定做!

注:path中的数据通过在ai中划线后存储为svg格式就可以拿到;

效果图:

svg动画之动态描边效果

代码如下:


 
 
 
 

2、与画线的效果,接下来用同样的原理来画一个“蓝胖子”,蓝胖子同样是需要用ai画出来,将所有的元素存在数组里面遍历时改变transtion中的during和delay从而实现划线的先后顺序。

效果图:

svg动画之动态描边效果

代码如下:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!


当前文章:svg动画之动态描边效果
文章源于:http://www.cdkjz.cn/article/iepghc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220