- 博客(3)
- 收藏
- 关注
原创 C3+Svg实现水球加载动画
在下边water这个盒子里面use两次这个svg矢量图,给其设置不同的填充色,并且给它加上动画,给其中一个加上translate属性让它向右无限做位移动画,那么当两个矢量图做相对运动的时候,就会产生视觉上的欺骗,让人感觉就像水在动一样。到这儿就可以实现一个文章开头一样的数据动态变化的水球加载动画,下边贴出完整代码。当它俩做相对移动的时候,就会产生下边这种效果(通过C3动画实现)然后此处数字以及水动画的动态变化就可以通过定时器+递归来实现。此处是单独一个向右移动(下边蓝色色块是父容器的背景色)
2023-05-27 01:38:30
262
1
原创 SVG实现路径动画
实现过程不难,最主要的就是理解svg的stroke-dasharray(虚线)与stroke-dashoffset(dasharray模式下路径的偏移量)利用svg描边动画实现一个雪糕小demo。
2023-05-23 20:45:23
627
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人