本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于jpg图片转换成svg文字路径动画的实例(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
最近对svg动画很感兴趣,用svg+css可以实现一些让人眼前一亮的效果,Ant Design 官网首屏就出现了svg动画,coding 官网首页也出现svg动画,也许在非前端人员看来效果很普通,但是在前端开发人员眼里,这种效果低调而又张扬!这和你做的jq animate动画一比较,高下立判!你还要说什么?
能做成Ant Design那样的动画效果是我的目标,我想先做个简单点的效果,譬如这样的文字描边动画效果
怎么做的呢?
这张jpg是我的头像,最终呈现的效果就是以这张图为基础。
首先要在PS中将图的选区转换成路径
再将带路径的ps文件导出到Ai
需要注意的是,第二个字母的路径由两部分组成,外层一个大选区,里面一个小的选区,这里要选“窗口”→“路径查找器”,形状模式选“差集”。
保存成svg格式,得到了代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
将css修改一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
关于svg和css相结合,以本示例为参考:
- fill 表示填充颜色,值是none表示没有颜色
- stroke 是边框的颜色
- stroke-width 定义边框的厚度
- stroke-dasharray 这个属性第一个参数定义了边框虚线长度,第二个参数是虚线的间距,什么是“边框虚线”,你可以认为边框本来就是虚线而不是实线,只不过虚线的间距为0,看起来就像是实线了。
- 这里用到了css3的@keyframes特性,将过渡动画控制stroke-dasharray 样式。
相关阅读 >>
SVG path路径的作用:SVG path在网页开发中的使用方法
canvas与SVG的区别有什么?canvas和SVG的区别比较
html5中的canvas 和 SVG分别是什么?它们的区别在何处?(实例)
更多相关阅读请进入《SVG》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者