svg 线条动画浅尝

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:看了别人网站的svg动画觉得非常舒服,自己尝试实现一下 效果如下:实现需要明白2个关于svg的css属性

看了别人网站的svg动画觉得非常舒服,自己尝试实现一下 效果如下:

svg 线条动画浅尝

实现需要明白2个关于svg的css属性

1. stroke-dasharray

stroke-dasharray: <percentage> | <length> | inherit 数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如 stroke-dasharray:30 20; ,效果如下:

svg 线条动画浅尝

注:可视区域模拟svg的大小方便接下来理解动画

stroke-dasharray:50; 如果为一个值那么短划线和缺口一样长

svg 线条动画浅尝

2. stroke-dashoffset

stroke-dashoffset: <percentage> | <length> | inherit 指定了dash模式到路径开始的距离,也就是偏移量 如果不写 stroke-dasharray 属性, stroke-dashoffset 属性就算写出花也看不到效果的。 stroke-dasharray:50;stroke-dashoffset:25px 效果如下

svg 线条动画浅尝

这条线向左移动了25px

再试一下 stroke-dasharray:200; stroke-dashoffset:0px

svg 线条动画浅尝

然后动画让 stroke-dashoffset 的值由0变为200动画就出来了

svg 线条动画浅尝
具体效果点击这里

3.demo地址

最后附上开篇放大镜的地址放大镜

总结

动画其实是由 stroke-dashoffset 的值变化实现的,每个线条动画其实是无限个缺口其中的一个,只不过其他的都在svg外面被隐藏起来了。获得每条path或者其他线条的长度(可以找设计要(捂脸)),把 stroke-dasharraystroke-dashoffset 的值都设置为线条长度,这时候线条会消失,再用动画把 stroke-dashoffset 设置为0就ok了。

本篇如能对您有所帮助,实在是感到荣幸。如有不合理之处也请大家多多指点


以上所述就是小编给大家介绍的《svg 线条动画浅尝》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

灵活Web设计

灵活Web设计

Zoe Mickley Gillenwater / 李静 / 2009-9 / 45.00元

《灵活Web设计》讲述如何应用可变或不固定布局及弹性布局来实现灵活设计,以满足用户的根据自己需求而调整浏览站点的窗口大小的要求。全书共分为9章,内容包括:理解灵活布局、可变布局和弹性布局存在的挑战、设计灵活布局的方法、准备网页设计、创建可变布局结构、创建弹性布局结构、规范灵活性、设置文字间距、添加背景图像和颜色、创建灵活的图像。 《灵活Web设计》适用于网页设计人员、网页设计爱好者。一起来看看 《灵活Web设计》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试