企业网站的基本形式不包括,山西省确诊病例最新情况,网页制作流程一共有几步,wordpress集成微信收款点击右上方红色按钮关注“web秀”#xff0c;让你真正秀起来前言首先祝大家2019新年快乐#xff0c;万事大吉#xff0c;猪事顺利#xff0c;阖家欢乐。前面文章SVG 线条动画基础入门知识学习到了基础知识#xff0c;现在来给大家讲讲如何制作SVG 制作复杂图形线条动画。假…点击右上方红色按钮关注“web秀”让你真正秀起来前言首先祝大家2019新年快乐万事大吉猪事顺利阖家欢乐。前面文章SVG 线条动画基础入门知识学习到了基础知识现在来给大家讲讲如何制作SVG 制作复杂图形线条动画。假如你有这样的一个gif要用svg画出来你能想到什么办法了上面这个 SVG 线条动画的路径 path 如果自己手工一个点一个点定位调试画出来的话估计你的累趴下(也不一定能搞定)。下面我来告诉大家一个简单的方法准备好工具。使用 PS 导出路径导入图片用魔术棒or套索工具,选择区域右击--建立工作路径--容差2个像素吧(可以用不同大小的容差多试几次直到得到一个自己满意的路径。)。好这个时候路径算是建立完成了可以把图层的透明度设置为 0 就能清晰的看到路径长啥样好到了 PS 中的最后一步点击 文件--导出--路径到 illustrator 看图照着操作就好在 illustrator 中生成 SVG 文件打开 AI 打开刚刚用 PS 导出的 *.ai 文件。可能你看到的是一片空白别慌使用ctrla全选就能选中路径啦。看到了吧这上面有多少个点太多都不想数所以手工画是不可能的啦。OK接下来就是调整画布大小最好是路径左上角和画布左上角对齐然后选中存储为 SVG 文件。好其实吧 AI 也没做什么路径是使用 PS 生成的为什么不直接用 PS 生成 *.svg 文件呢因为我用的版本 PS 还没支持直接存储为 SVG 格式。然后其实也可以直接在 AI 上绘制路径这个就看设计师或者你对哪个工具更熟悉了。获取 SVG 的 path 路径把刚刚保存的 *.svg 路径的文件用浏览器打开右键查看网页源代码这里的path就是我们要的路径了运用动画.container { width: 400px; margin: 20px auto; } .yy { stroke-width: 5; stroke: #f987ae; animation: lineMove 13s ease-out infinite; } keyframes lineMove { 0% { stroke-dasharray: 0, 4891; } 50% { stroke-dasharray: 4891, 4891; fill: rgba(0, 0, 0, 0); opacity: 1; } 100% { stroke-dasharray: 4891, 4891; fill: rgba(249, 135, 174, 1); opacity: 0; } }这里的stroke-dasharray长度可以通过js来获取var obj document.querySelector(path); var length obj.getTotalLength(); console.log(length); // 4890.61669921875是不是很简单了赶紧自己试试吧。公告喜欢小编的点击关注了解更多知识源码地址和源文件下载请点击下方“了解更多”
