jpg图片转换成svg文字路径动画的示例

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

专业从事成都网站设计、成都做网站,高端网站制作设计,小程序制作,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务,采用H5页面制作+CSS3前端渲染技术,成都响应式网站建设,让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组,与您实时在线互动,随时提供解决方案,畅聊想法和感受。

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

能做成Ant Design那样的动画效果是我的目标,我想先做个简单点的效果,譬如这样的文字描边动画效果
jpg图片转换成svg文字路径动画的示例

怎么做的呢?

jpg图片转换成svg文字路径动画的示例

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

jpg图片转换成svg文字路径动画的示例

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

jpg图片转换成svg文字路径动画的示例

jpg图片转换成svg文字路径动画的示例

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

jpg图片转换成svg文字路径动画的示例

jpg图片转换成svg文字路径动画的示例

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

保存成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 样式。

最终整体代码如下


    
    Document
    

        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://scyanting.com/article/ijjchs.html