从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍jpg图片转换成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 样式。
最终整体代码如下
Document
以上是“jpg图片转换成svg文字路径动画的示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图