如何为网站创建这个 CSS/SVG 动画？答案

【问题标题】：How can I create this CSS/SVG animation for a website?如何为网站创建这个 CSS/SVG 动画？
【发布时间】：2018-11-18 19:01:33
【问题描述】：

我的任务是为一个新网站做一些 UX 工作（使用 Vue.js 和 SASS w/Bourbon），这与 https://stripe.com/connect 在这里所做的非常相似：

所以问题是这是如何完成的？我需要使用哪些技术？它只是 SVG 和 CSS 吗？如果是这样，那么 SVG 是如何操作的，我需要设计师制作什么样的 SVG，我需要使用什么样的 CSS 属性来操作这些元素？

一个单独的（但相关的）问题是，我如何才能实现它们在这里的流动性和性能？互动起来非常顺滑！

【问题讨论】：

我不是要“刚刚”工作的代码，而是要信息。我不是要求任何人为我做这项工作，我是在询问如何自己做这项工作的指导。感谢您和任何投反对票的人，仅仅因为您不知道答案并不意味着这是一个坏问题。也许您想说的是，如果没有与问题一起显示的代码，那么这对您来说是个坏问题？ @PerHenrikJakobsson
@PerHenrikJakobsson 也许你应该实践你所宣扬的。 stackoverflow.com/questions/46324286/… - 我的朋友很虚伪吗？

【解决方案1】：

我这样做的方法是创建一个包含任何和所有想象、部分、图标等的 SVG 文件。即使它们重叠，你也需要，并将它们设置为不透明度为零，这样你就可以离开了用户将首先看到的默认版本。

这只是一个例子：

.first svg {
    #Tool {
      visibility: hidden;
    }
    #Tool-ON {
      @include transition(ease-in 0.5s);
      opacity: 1;
    }
  }

如果 HTML 元素具有 .first 类，则 SVG 将根据类中的属性进行更改。相当简单，但有了这个基本概念，您可以根据用户输入制作非常酷的图像动画。

【讨论】：