快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

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

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

用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://6mz.cn/article/jesej.html

其他资讯