jpg图片转换成svg文字路径动画的示例-创新互联

这篇文章主要介绍jpg图片转换成svg文字路径动画的示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联建站专注于龙文企业网站建设,响应式网站,成都做商城网站。龙文网站建设公司,为龙文等地区提供建站服务。全流程按需制作，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

用svg+css可以实现一些让人眼前一亮的效果，Ant Design 官网首屏就出现了svg动画，coding 官网首页也出现svg动画，也许在非前端人员看来效果很普通，但是在前端开发人员眼里，这种效果低调而又张扬！这和你做的jq animate动画一比较，高下立判！你还要说什么？

能做成Ant Design那样的动画效果是我的目标，我想先做个简单点的效果，譬如这样的文字描边动画效果

怎么做的呢？

这张jpg是我的头像，最终呈现的效果就是以这张图为基础。

首先要在PS中将图的选区转换成路径

再将带路径的ps文件导出到Ai

需要注意的是，第二个字母的路径由两部分组成，外层一个大选区，里面一个小的选区，这里要选“窗口”→“路径查找器”，形状模式选“差集”。

保存成svg格式，得到了代码：

    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#30479B;}
    
    
    
    
    
    

将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{width: 250px;height: 250px;}
    
    
    
    
    
        .st0{fill: none;            
        stroke-width:2;            
        stroke:#30479B;            
        stroke-dasharray: 250;            
        animation: lineMove 5s ease-out infinite;            
        }
        @keyframes lineMove {
            0%{                
            stroke-dasharray: 0, 250;            
            }
            100%{                
            stroke-dasharray: 250, 250;            
            }
        }    
        
    
        
        
        
        
        
        
    
    
    
    

以上是“jpg图片转换成svg文字路径动画的示例”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道！

分享文章：jpg图片转换成svg文字路径动画的示例-创新互联
网页网址：http://6mz.cn/article/jesej.html