如何为网站创建此CSS / SVG动画？

Question

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

所以问题是这是怎么做到的？我需要使用哪些技术？它只是SVG和CSS吗？如果是这样，SVG是如何操作的，我需要设计师使用什么类型的SVG以及我需要使用哪种CSS属性来操作这些元素？

一个单独的（但相关的）问题是，我如何才能实现他们在这里的流动性和性能？与...进行互动非常流畅！

Answer 1

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

1. 确保正确命名所有SVG元素以及易于记忆的内容，并根据它们的动画方式对它们进行分组。将一起动画的任何内容组合在一起。

2. 将要设置动画的元素设置为不透明度为零。

3. 复制SVG代码并将其直接粘贴到HTML文件中。
4. 使用CSS定位每个ID并为其提供所需的动画。

这只是一个例子：

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

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