作者:瓶子 | 来源:互联网 | 2023-06-20 10:18
本篇文章给大家带来的内容是关于jpg图片转换成svg文字路径动画的实例(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
最近对svg动画很感兴趣,用svg+css可以实现一些让人眼前一亮的效果,Ant Design 官网首屏就出现了svg动画,coding
官网首页也出现svg动画,也许在非前端人员看来效果很普通,但是在前端开发人员眼里,这种效果低调而又张扬!这和你做的jq
animate动画一比较,高下立判!你还要说什么?
能做成Ant Design那样的动画效果是我的目标,我想先做个简单点的效果,譬如这样的文字描边动画效果
怎么做的呢?
这张jpg是我的头像,最终呈现的效果就是以这张图为基础。
首先要在PS中将图的选区转换成路径
再将带路径的ps文件导出到Ai
需要注意的是,第二个字母的路径由两部分组成,外层一个大选区,里面一个小的选区,这里要选“窗口”→“路径查找器”,形状模式选“差集”。
保存成svg格式,得到了代码:
将css修改一下
.st0{fill: none;
stroke-width:2;
stroke:#30479B;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dasharray: 250, 250;
animation: lineMove 5s ease-out infinite;
}
@keyframes lineMove {
0%{
stroke-dasharray: 0, 250;
}
100%{
stroke-dasharray: 250, 250;
}
}
关于svg和css相结合,以本示例为参考:
- fill 表示填充颜色,值是none表示没有颜色
- stroke 是边框的颜色
- stroke-width 定义边框的厚度
- stroke-dasharray 这个属性第一个参数定义了边框虚线长度,第二个参数是虚线的间距,什么是“边框虚线”,你可以认为边框本来就是虚线而不是实线,只不过虚线的间距为0,看起来就像是实线了。
- 这里用到了css3的@keyframes特性,将过渡动画控制stroke-dasharray 样式。
最终整体代码如下
相关文章推荐:
svg中的symbol如何制作icon
SVG画图功能:svg实现画出一朵花(附代码)
以上就是jpg图片转换成svg文字路径动画的实例(附代码)的详细内容,更多请关注其它相关文章!