svg
5篇文章 · 0订阅
  • UI设计师福利之零基础入门SVG路径动画（看最后的更正部分）
    先看一个动画效果，这种小飞机沿路径飞行(路径部分线段变成绿色是录屏软件出了问题)。 这种动画效果最常见于发送信息后，两个不同位置之间的导航指向等等，总之使用场景还是很多的。对于SVG动画来说，这种效果是最最简单不过，只需要一个路径外加几个属性的简单设置就能完成，简单到不算飞机图…
    设计 SVG
  • UI设计师SVG动画进阶篇——路径变形动画（上篇）
    之前分享了一些自己平时整理的可以通用的SVG动画的教程基本都是最基础的变化，旋转也好，缩放也好，沿路径运动也好，只需要定义CSS3的一些动画属性值或者SVG的动画属性标签，当然，运用得当的话，依靠这些也能做出很多超炫的效果，只要想象力足够，idear胜过方法。本质上来讲，各种动…
    CSS 前端 SVG
  • UI设计师SVG动画进阶篇——路径变形动画（中篇）
    接着上篇 https://juejin.im/post/6844903477768896525 继续，上篇对于UI来说，应该是小菜菜，因为毕竟都是以AI为出发点，所有的调整也都是在AI里来完成，从现在开始，继续深入下去，加大点难度。上篇称之为基础篇，这篇是进阶篇。 6.…
    CSS SVG 动效
  • UI 设计师 SVG 动画进阶篇——蒙版动画（下）
    继续上篇 6.动态蒙版位移的产生的扫描效果 这个算是上篇末尾的一点小改进，单独拿出来说，因为这种效果用的场景很多，关键还简单，先看示意图。 设想一下，给文本应用一个蒙版，蒙版的白色部分从左向右移动，是不是就有一种文本逐渐显示的效果。 <svg width="800" height…
    CSS 设计 SVG
  • UI设计师SVG动画进阶篇——蒙版动画（上）
    蒙版对于UI设计师来说，太熟悉不过了，当然了，可能PS里面用的多一些，AI里面用的少一些，SVG同样支持蒙版，而且借助蒙版，能完成很多神奇的效果。我喜欢称蒙版动画为一种魔术，这是真正的“障眼法”，它只让你看到想要看到的部分。 前面SVG的动画效果里，有两次用过了蒙版，一个是在路径…
    CSS 设计 SVG