内容简介:看了别人网站的svg动画觉得非常舒服,自己尝试实现一下 效果如下:实现需要明白2个关于svg的css属性
看了别人网站的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了。
本篇如能对您有所帮助,实在是感到荣幸。如有不合理之处也请大家多多指点
以上所述就是小编给大家介绍的《svg 线条动画浅尝》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- canvas——橡皮筋式线条绘图应用
- 如何在android中用手指在imageview上绘制线条
- Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
- 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能
- 浅尝webpack
- Go 语言浅尝 Map
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大数据系统构建
Nathan Marz、James Warren / 马延辉、向磊、魏东琦 / 机械工业出版社 / 2017-1 / 79.00
随着社交网络、网络分析和智能型电子商务的兴起,传统的数据库系统显然已无法满足海量数据的管理需求。 作为一种新的处理模式,大数据系统应运而生,它使用多台机器并行工作,能够对海量数据进行存储、处理、分析,进而帮助用户从中提取对优化流程、实现高增长率的有用信息,做更为精准有效的决策。 但不可忽略的是,它也引入了大多数开发者并不熟悉的、困扰传统架构的复杂性问题。 本书将教你充分利用集群硬件优势的La......一起来看看 《大数据系统构建》 这本书的介绍吧!