svg动画之动态描边效果

网友投稿 309 2023-06-09


svg动画之动态描边效果

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

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

效果图:

代码如下:

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

效果图:

代码如下:


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序开发之相册选择和拍照详解及实例代码
下一篇:微信小程序 开发之滑块视图容器(swiper)详解及实例代码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~