推广电子商务网站的案例,企业网站建设主要包括哪些内容,中国建设招标网官方网站,在百度上怎么打广告看了别人网站的svg动画觉得非常舒服,自己尝试实现一下效果如下: 实现需要明白2个关于svg的css属性 1. stroke-dasharray stroke-dasharray: percentage | length | inherit数与数之间用逗号或者空白隔开#xff0c;指定短划线和缺口的长度。如stroke-dasharr… 看了别人网站的svg动画觉得非常舒服,自己尝试实现一下效果如下: 实现需要明白2个关于svg的css属性 1. stroke-dasharray stroke-dasharray: percentage | length | inherit数与数之间用逗号或者空白隔开指定短划线和缺口的长度。如stroke-dasharray:30 20;,效果如下: 注:可视区域模拟svg的大小方便接下来理解动画 stroke-dasharray:50;如果为一个值那么短划线和缺口一样长 2. stroke-dashoffset stroke-dashoffset: percentage | length | inherit指定了dash模式到路径开始的距离,也就是偏移量如果不写stroke-dasharray属性,stroke-dashoffset属性就算写出花也看不到效果的。stroke-dasharray:50;stroke-dashoffset:25px效果如下 这条线向左移动了25px 再试一下stroke-dasharray:200; stroke-dashoffset:0px 然后动画让stroke-dashoffset的值由0变为200动画就出来了 具体效果点击这里 3.demo地址 最后附上开篇放大镜的地址放大镜 总结 动画其实是由stroke-dashoffset的值变化实现的,每个线条动画其实是无限个缺口其中的一个只不过其他的都在svg外面被隐藏起来了。获得每条path或者其他线条的长度(可以找设计要(捂脸))把stroke-dasharray和stroke-dashoffset的值都设置为线条长度,这时候线条会消失,再用动画把stroke-dashoffset设置为0就ok了。 本篇如能对您有所帮助实在是感到荣幸。如有不合理之处也请大家多多指点